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

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

我希望它是这样的

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");
}

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


当前回答

我使用了空的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>

其他回答

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

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>

我知道这是一个非常老的问题,但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情,但你不能以一种有效的方式去做。为了有一个有效的img标记,它必须有src和alt属性。

因此,任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。

简而言之:在语法结构中,您所寻找的内容是不能合法地完成的。

来源:W3 Validator

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

}

使用HTML5就可以了:)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

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