blocks|key|1057122|text|#divID+{
++++background-image:+url("http://imageurlhere.com");
++++background-repeat:+no-repeat;
++++width:+auto;+/*or+your+image's+width*/
++++height:+auto;+/*or+your+image's+height*/
++++margin:+0;
++++padding:+0;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1057123|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>#divID {
 background-image: url("http://imageurlhere.com");
 background-repeat: no-repeat;
 width: auto; /*or your image's width*/
 height: auto; /*or your image's height*/
 margin: 0;
 padding: 0;
}
</code></pre>

blocks|key|1271929|text|CSS不用于定义DOM元素属性的值，javascript更适合于此。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271930|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

CSS is not used to define values to DOM element attributes, javascript would be more suitable for this.

blocks|key|1057190|text|不是的。你能得到的最接近的是设置一个背景图片：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1057191|<div+id="myimage"></div>

#myimage+{
++width:+20px;
++height:+20px;
++background:+white+url(myimage.gif)+no-repeat;
}|code-block|syntax|javascript|1057192|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

No. The closest you can get is setting a background image:

<pre><code>&lt;div id="myimage"&gt;&lt;/div&gt;

#myimage {
 width: 20px;
 height: 20px;
 background: white url(myimage.gif) no-repeat;
}
</code></pre>

blocks|key|1057231|text|他们是对的。IMG是一个内容元素，而CSS是关于设计的。但是，当您出于设计目的而使用某些内容元素或属性时，该怎么办呢？我在我的网页上有IMG，如果我改变样式(+CSS)就必须改变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1057232|这是一个在CSS样式中定义IMG表示(不是真正的图像)的解决方案。|1057233|1:创建1x1透明gif或png。|1057234|2:将IMG的src属性赋值给该镜像。|1057235|3:在CSS样式中使用"background-image“定义最终的表示。|1057236|它的工作方式就像一种护身符:)|1057237|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).

Well this is a solution for defining IMG presentation (no really the image) in CSS style. 
1: create a 1x1 transparent gif or png. 
2: Assign propery "src" of IMG to that image. 
3: Define final presentation with "background-image" in the CSS style. 

It works like a charm :)

blocks|key|1057270|text|正如img标签是一个内容元素一样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1057271|img+{
++++content:url(http://example.com/image.png);
}|code-block|syntax|javascript|1057272|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

just this as img tag is a content element

<pre><code>img {
 content:url(http://example.com/image.png);
}
</code></pre>

blocks|key|1057328|text|在尝试了这些解决方案后，我仍然不满意，但我在这个article中找到了一个解决方案，它可以在Chrome，Firefox，Opera，Safari，IE8%2B上运行|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1057329|#divId+{

++display:+block;
++-moz-box-sizing:+border-box;
++box-sizing:+border-box;
++background:+url(http://notrealdomain2.com/newbanner.png)+no-repeat;
++width:+180px;+/*+Width+of+new+image+*/
++height:+236px;+/*+Height+of+new+image+*/
++padding-left:+180px;+/*+Equal+to+width+of+new+image+*/

}|code-block|syntax|javascript|1057330|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/replace-the-image-in-an-img-with-css/^0|O|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

After trying these solutions I still wasn't satisfied but I found a solution in this <a href="http://css-tricks.com/replace-the-image-in-an-img-with-css/" rel="noreferrer">article</a> and it works in Chrome, Firefox, Opera, Safari, IE8+

<pre><code>#divId {

 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
 width: 180px; /* Width of new image */
 height: 236px; /* Height of new image */
 padding-left: 180px; /* Equal to width of new image */

}
</code></pre>

I need to define an &lt;img>'s src attribute in CSS. Is there a way to specify this attribute?

Define an <img>'s src attribute in CSS

我需要在CSS中定义一个的src属性。有没有办法指定这个属性？

问在CSS中定义的src属性
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中定义的src属性EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中定义的src属性
EN