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

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

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

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

来源:W3 Validator

当用户打印“打印背景颜色和图像”时，任何基于背景或背景图像的方法都可能失败。 不幸的是，这是典型浏览器的默认设置。

这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。

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

你可以在HTML代码中定义2个图像，并使用display: none;来决定哪一个是可见的。

在一个“控制”容器中放置几张图像，并更改容器的类。在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。