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

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

我希望它是这样的

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

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


当前回答

为了重申之前的解决方案并强调纯CSS实现,这里是我的答案。

如果您从另一个站点获取内容,因此无法控制所交付的HTML,则需要使用纯CSS解决方案。在我的案例中,我试图删除授权源内容的品牌,以便被授权方不必为他们购买内容的公司做广告。因此,我删除了他们的标志,而保留了其他一切。我要提醒一下,这是我客户合同规定的。

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}

其他回答

据我所知,你不能。CSS是关于样式的,图像的src是关于内容的。

如果你不想设置背景属性,那么你不能只使用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>

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

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