如何在 <img> 标签上应用背景颜色？

Question

有没有一种方法可以在<img>标签上应用背景颜色？

<img src="abc.jpg" style="background-color:red;">

以上代码无法运行。

请帮帮我。

谢谢。

- vjy tiwari

---

是的，这是可能的，但您正在使用jpg格式的图像。您必须使用带有透明度的图像。 - Huelfe

将img标签包裹在div标签中，并在div标签上应用背景颜色。 - Billu

@AT-2017，我正在使用Slick Slider，并需要在所选缩略图图像上应用背景颜色。 - vjy tiwari

Answer 1

是的，这是可能的。你只需要对图片应用内边距(padding)，然后你可以得到以下结果:

或者

你也可以使用.png图片并应用透明属性。

img {
  max-width: 50%;
}

<img src="http://pngimg.com/uploads/mario/mario_PNG53.png" style="background-color:red;padding:20px;">

- Maulik

---

不，我想用背景色覆盖整个图像。 - vjy tiwari

我无法更改图像类型，因为有大约50000个产品，每个产品都有许多jpg图像。 - vjy tiwari

Answer 2

你可以使用 background-blend-mode 属性。

特别是，background-blend-mode: multiply 似乎是你需要的。

根据规范：

multiply blend mode

源颜色与目标颜色相乘并替换目标颜色。

.image {
  width: 200px;
  height: 150px;
  background-image: url(https://placeimg.com/200/150/animals);
}

.blended {
  background-color: red;
  background-blend-mode: multiply;
}

<div class="image"></div>
<div class="image blended"></div>

注意：

由于您无法更改标记，仍然有一种方法可以以上述方式对图像进行样式设置（尽管这有点技巧性）。

我们可以通过为图片添加内边距并将图片的宽度和高度设置为零来使用 CSS 替换具有相同背景图像的 img（更多详情请参阅此处）。

img {
  padding: 75px 100px;
  width: 0;
  height: 0;
  background-color: red;
  background-blend-mode: multiply;
  background-image: url(https://placeimg.com/200/150/animals);
}

<img src="https://placeimg.com/200/150/animals">

- Danield

---

我无法更改我的 html 代码，因为它是通过脚本生成的。 - vjy tiwari

我更新了帖子，并提供了一个 CSS 解决方案，这可能对你有用。 - Danield

用户要求在<img>标签上应用背景颜色，而不是在其他具有background-image的元素上。那么这怎么成为答案了呢？ - user8317956

@anu - 请看第二段代码片段 - 标记仅包含一个 img 标签 - 就像问题中一样。 - Danield

Answer 3

由于您使用了Slick滑块，您可能希望像下面的示例那样进行操作。正如之前所注意到的，您也可能希望使用PNG而不是JPG，因为PNG支持透明度。

.slick-slide .image img {
   background-color: red;
   padding: 5px; //some padding to show the background color
} 

- TheAmplifier

Answer 4

<img class="image"/> <img class="image blended"/> 将 div 标签更改为 image 标签，如下：

- tezz