是否有可能在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属性。

当前回答

你可以用JS转换它:

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

2016-02-27 21:57:51

其他回答

使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:

$("img.myClass").attr("src", "http://somwhere");

2010-02-02 10:44:43

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

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

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

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

来源:W3 Validator

2013-07-14 20:27:02

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

2010-02-02 08:39:21

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

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

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

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