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的padding。

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;

大功告成。