通过css替换img的内容

我有这个图像标签：

<img src="http://placehold.it/200x200"/>

我需要通过css替换图像（因为我无法编辑html），所以我使用这个css：

img {
 content: url('http://lorempixel.com/200/200');
}

它在 chrome 上运行良好，但在 firefox 和 ie 中不起作用，知道为什么吗？

1）将图像的宽度和高度设置为0。

2) 添加 100px 的内边距。

3）通过背景图像添加新图像

img {
  display: inline-block;
  background: url(http://lorempixel.com/200/200) no-repeat; /* <--- */
  width: 0; /* <--- */
  height: 0; /* <--- */
  padding: 100px; /* <--- */
}

.replace {
  display: inline-block;
  background: url(http://lorempixel.com/200/200) no-repeat;
  width: 0;
  height: 0;
  padding: 100px;
}

<h4>Image from placehold.it:</h4>

<img src="http://placehold.it/200x200"/>

<hr>

<h4>Same image in markup - but replaced via CSS</h4>

<img class="replace" src="http://placehold.it/200x200"/>

FIDDLE http://jsfiddle.net/danield770/ADkKW/4/

这是如何运作的？

好吧，假设我们向原始 img 元素添加了填充：

img {
    padding:100px;
    background: pink;
}

结果是你的原始图像，每边都有 100px 的粉红色背景

现在将宽度/高度设置为 0：

img {
   padding:100px;
   background: pink;
   width:0;height:0;
}

你会得到一个 200px X 200px 的粉红色区域：（所以现在你已经消除了原始图像）

现在将粉红色背景更改为新背景

background: url(http://lorempixel.com/200/200) no-repeat;

你就完成了。