html - 通过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"/>

小提琴

这是如何运作的？

好吧，假设我们为您的原始 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;

你就完成了。

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 */
  }