Question

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

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

以上代码无效。

请帮帮我。

由于

Answer 1

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

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

来自spec：

乘法混合模式

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

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

<强> NB：

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

我们可以使用css将相同的背景图像替换为img，方法是在图像中添加填充，然后将图像的宽度和高度设置为零。（更多详情here）

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

Answer 2

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

或

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

img {
  max-width: 50%;
}

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

Answer 3

由于您使用Slick滑块，您可能需要执行类似下面的示例。如前所述，您也可能希望使用PNG而不是JPG，因为PNG支持透明度。

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

Answer 4

<img class="image"/> <img class="image blended"/>将div标记更改为图片标记，如

是否可以在<img/>标签上应用背景颜色

4 个答案: