通过css替换img的内容

Question

我有这个图片标记：

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

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

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

它在chrome上运行良好，但在firefox中没有工作，也就是说，为什么会这样做？

Answer 1

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

这是如何工作的？

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

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

结果是你的原始img，每侧有100px的粉红色背景

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

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

你得到200px X 200px的粉色区域:(所以现在你已经删除了原始图像）

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

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

你已经完成了。

Answer 2

<强> HTML

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

<强> CSS

img{
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://lorempixel.com/200/200) no-repeat;
  width: 200px; /* Width of new image */
  height: 200px; /* Height of new image */
  padding-left: 200px; /* Equal to width of new image */
  }