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

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

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

我想补充一点:背景图像也可以用background-position: x - y来定位;(x水平y垂直)。(. .) 我的例子，CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)

如果你不想设置背景属性，那么你不能只使用CSS来设置图像的src属性。

您也可以使用JavaScript来完成这一任务。

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

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