Question

如何通过css替换图像标签src值？我想在ie8，firefox，chorme，safari中获得支持

<div class="any">
 <img src="images/i.png"/>
</div>

仅通过css替换此src值。

由于

Answer 1

您无法使用CSS更改图像的src标记，因为图像src与CSS无关。

你可以做的最接近的是设置div的背景图像并完全摆脱img标签：

.any {
    background-image: url('images/myimage.png');
}

除此之外，您还需要使用Javascript。

Answer 2

您无法通过CSS更改src。虽然你可以做的是定义一个空白div，并通过CSS给它一个宽度，高度和背景图像。这种方法的唯一缺点是元素的行为不像用户的图像（拖放，右键单击以保存等）。

div.any {
  width: 200px;
  height: 200px;
  background-image: url('./some-url-that-you-can-override-by-another-stylesheet');
}

Answer 3

尝试设置背景图像，然后从包装盒中移动（使用填充）原始图像

像这样......

编辑我不得不调整一下以使其正常工作......

.any img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://placehold.it/150) no-repeat;
  width: 150px; 
  height: 150px;  
  padding-left: 150px; 
}

......这是一个有效的例子 http://jsfiddle.net/nNaRn/1/

Answer 4

您唯一可以做的就是将background-image设置为.any而将display:none设置为img，但您还需要设置width和{ div的{1}}，因为没有内容的div的宽度为100％，高度为0。

height

如何仅通过css更改Img标签src？

4 个答案: