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

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

我希望它是这样的

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

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


当前回答

他们是对的。IMG是内容元素,CSS是设计元素。 但是,当您出于设计目的使用某些内容元素或属性时,情况又会如何呢? 我有IMG跨我的网页,必须改变,如果我改变样式(CSS)。

好吧,这是一个解决方案定义IMG表示(不是真正的图像)在CSS风格。

创建一个1x1透明GIF或png。 将IMG的属性“src”分配给该图像。 在CSS样式中用“background-image”定义最终的表示形式。

它的工作就像一个魅力:)

其他回答

当用户打印“打印背景颜色和图像”时,任何基于背景或背景图像的方法都可能失败。 不幸的是,这是典型浏览器的默认设置。

这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。

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

你可以用JS转换它:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});

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

替代方法

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>