是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。
当前回答
替代方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
其他回答
我使用了空的div解决方案，与这个CSS:
#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}
HTML:
<div id="throbber"></div>
使用内容:url(“image.jpg”)。
完整的工作方案(现场演示):
<！doctype html > <时尚> .MyClass123 { 内容:url(“http://imgur.com/SZ8Cm.jpg”); ｝ > < /风格 < img类= " MyClass123 " / >
测试和工作:
Chrome 14.0.835.163 Safari你 Opera 10.6 Firefox 100及更新版本
已测试且不工作:
FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但图像不显示) Internet Explorer 11.0.9600.17905 (URL从未加载)
我今天找到了一个解决方案(适用于IE6+， FF, Opera, Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
工作原理:
图像被缩小，直到不再可见的宽度和高度。 然后，你需要用填充物“重置”图像大小。这 一个是16x16的图像。当然你可以使用padding-left / 填充顶部以制作矩形图像。 最后，使用背景将新图像放在那里。 如果新的背景图像太大或太小，我建议使用background-size，例如:background-size:cover;这样就能把你的图像放到分配的空间里。
它也适用于提交-输入-图像，它们保持可点击。
参见现场演示:http://www.audenaerde.org/csstricks.html#imagereplacecss
享受吧!
使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
当用户打印“打印背景颜色和图像”时，任何基于背景或背景图像的方法都可能失败。 不幸的是，这是典型浏览器的默认设置。
这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。
