是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。
当前回答
我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法(IE6无法确认) 学分:http://www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
CSS:
img[src*="pathTo/myImage.jpg"] {
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;
display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;
/* for IE 5.5's bad box model */
height /**/:20px;
}
旧的形象不见了，新的形象如预期般出现了。
下面这个简洁的解决方案只适用于webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
其他回答
我知道这是一个非常老的问题，但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情，但你不能以一种有效的方式去做。为了有一个有效的img标记，它必须有src和alt属性。
因此，任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。
简而言之:在语法结构中，您所寻找的内容是不能合法地完成的。
来源:W3 Validator
如果你不想设置背景属性，那么你不能只使用CSS来设置图像的src属性。
您也可以使用JavaScript来完成这一任务。
使用HTML5就可以了:)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法(IE6无法确认) 学分:http://www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
CSS:
img[src*="pathTo/myImage.jpg"] {
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;
display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;
/* for IE 5.5's bad box model */
height /**/:20px;
}
旧的形象不见了，新的形象如预期般出现了。
下面这个简洁的解决方案只适用于webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
