有没有办法在 <img> 标签上应用背景颜色？

Question

有没有办法在 <img> 标签上应用背景颜色？

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

上面的代码不工作。

请帮我 。

谢谢

原文由 vjy tiwari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

特别是， background-blend-mode: multiply 似乎是您在这里需要的。

从 规格：

倍增混合模式

源颜色乘以目标颜色并替换目标颜色。

 .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>

注意：

由于您无法更改标记，因此仍然可以通过上述方式设置图像样式。 （虽然有点hacky）

我们可以通过给图片添加padding，然后将图片的宽和高设置为零，来用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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

是的，这是可能的。您只需要对图像应用填充。然后你可以得到下面的结果：

要么

您还可以使用 .png 图像并应用透明属性。

 img {
  max-width: 50%;
}

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

原文由 Maulik 发布，翻译遵循 CC BY-SA 3.0 许可协议