是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。
当前回答
这里有一个很好的解决方案-> http://css-tricks.com/replace-the-image-in-an-img-with-css/ 正反两方面: (+)与具有相对宽度/高度的矢量图像(RobAu的答案不处理的事情) (+)是跨浏览器的(也适用于IE8+) (+)只使用CSS。所以不需要修改img src(或者如果你没有权限/不想改变已经存在的img src属性)。 (-)抱歉，它使用后台CSS属性:)
其他回答
或者你也可以这样做我在网上找到的。
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
这样可以有效地隐藏图像和填充背景。哦，这是一个黑客，但如果你想要一个IMG标签与alt文本和背景，可以不使用JavaScript缩放?
在我现在正在做的一个项目中，我创建了一个英雄块树枝模板
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
据我所知，你不能。CSS是关于样式的，图像的src是关于内容的。
如果你不想设置背景属性，那么你不能只使用CSS来设置图像的src属性。
您也可以使用JavaScript来完成这一任务。
你可以在HTML代码中定义2个图像，并使用display: none;来决定哪一个是可见的。
我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法(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 */
}
