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

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

我希望它是这样的

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

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


当前回答

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

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

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

来源:W3 Validator

其他回答

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

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

创建一个1x1透明GIF或png。 将IMG的属性“src”分配给该图像。 在CSS样式中用“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);
}

有些数据我会留在HTML中,但最好在CSS中定义src:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}

你可以用JS转换它:

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

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