是否可以在CSS中设置img标记的src属性的等价物？

4> Emmanuel Tou..：
我用这个CSS的空div解决方案:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}


HTML:



        

5> EricG..：
我找到了比建议的解决方案更好的方法,但确实使用了背景图像.
符合方法(无法确认IE6)  
致谢:http://www.kryogenix.org/code/browser/lir/




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 */

}

        

6> 小智..：
他们是对的.IMG是一个内容元素,CSS是关于设计的.但是,当您为设计目的使用某些内容元素或属性时呢？我在我的网页上有IMG,如果我改变样式(CSS)必须改变.

那么这是一个用于定义CSS风格的IMG表示(没有真正的图像)的解决方案.



创建1x1透明gif或png.

将IMG的"src"分配给该图像.

使用CSS样式中的"background-image"定义最终演示文稿.



它像一个魅力:)

        
-1即使你的答案不错,他也特别提到他不想使用`background*` 

7> 小智..：
这是一个非常好的解决方案 - > http://css-tricks.com/replace-the-image-in-an-img-with-css/


 
Pro(s)和Con(s):( 
 
+)适用于矢量具有相对宽度/高度的图像(RobAu的答案不能处理的东西)
 
(+)是跨浏览器(也适用于IE8 +)

(+)它只使用CSS.因此无需修改img src(或者如果您没有访问/不想更改已存在的img src属性).

( - )对不起,它确实使用了后台css属性:)

        

8> 小智..：
您可以在HTML代码中定义2个图像,然后使用它们display: none;来决定哪个图像可见.

        

9> cletus..：
不,你不能通过CSS设置图像src属性.你可以得到的最接近的是,background或者background-image.我不建议这样做,因为它有点不合逻辑.

但是,如果您定位的浏览器能够使用它,则可以使用CSS3解决方案.content:url 按照Pacerier的回答中所述使用.您可以在下面的其他答案中找到其他跨浏览器解决方案.