是否有可能在CSS中设置一个img标签的src属性的等效?

是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:

<img src="pathTo/myImage.jpg" />

我希望它是这样的

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");
}

我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。

当前回答

使用内容: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从未加载)

2012-07-14 14:51:21

其他回答

我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。兼容方法(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 */

}

2012-05-25 09:11:08

不，你不能通过CSS设置图像src属性。你能得到的最接近的是，如你所说，背景或背景图像。我不建议这样做，因为这有点不合逻辑。

但是，如果你的目标浏览器能够使用CSS3解决方案，那么你可以使用它。请使用Pacerier回答中描述的content:url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。

2010-02-02 08:36:17

这里有一个很好的解决方案-> http://css-tricks.com/replace-the-image-in-an-img-with-css/ 正反两方面: (+)与具有相对宽度/高度的矢量图像(RobAu的答案不处理的事情) (+)是跨浏览器的(也适用于IE8+) (+)只使用CSS。所以不需要修改img src(或者如果你没有权限/不想改变已经存在的img src属性)。 (-)抱歉，它使用后台CSS属性:)

2013-10-01 10:39:59

或者你也可以这样做我在网上找到的。

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>

2015-08-24 18:57:10