为了重申之前的解决方案并强调纯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);
}

我今天找到了一个解决方案(适用于IE6+， FF, Opera, Chrome):

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

工作原理:

图像被缩小，直到不再可见的宽度和高度。 然后，你需要用填充物“重置”图像大小。这 一个是16x16的图像。当然你可以使用padding-left / 填充顶部以制作矩形图像。 最后，使用背景将新图像放在那里。 如果新的背景图像太大或太小，我建议使用background-size，例如:background-size:cover;这样就能把你的图像放到分配的空间里。

它也适用于提交-输入-图像，它们保持可点击。

参见现场演示:http://www.audenaerde.org/csstricks.html#imagereplacecss

享受吧!

不，你不能通过CSS设置图像src属性。你能得到的最接近的是，如你所说，背景或背景图像。我不建议这样做，因为这有点不合逻辑。

但是，如果你的目标浏览器能够使用CSS3解决方案，那么你可以使用它。请使用Pacerier回答中描述的content:url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。

替代方法

.myClass {
background: url('/img/loading_big.gif');
}

<div class="myClass"></div>

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

}

在一个“控制”容器中放置几张图像，并更改容器的类。在CSS中，根据容器的类添加规则来管理图像的可见性。这将产生与改变单个图像的img src属性相同的效果。

HTML:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

注意，它将预加载所有图像，就像CSS的backround-images，但不像通过JS更改img src。