有没有办法在标签上应用背景色?

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

或

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

img {
  max-width: 50%;
}

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

你可以利用 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>

注意:

由于您无法更改标记,仍然有一种方法可以按上述方式设置图像的样式。(虽然有点粗糙)

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

由于您使用Slick slider,您可能需要执行以下示例。如前所述,您可能还希望使用PNG而不是JPG,因为PNG支持透明度。

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

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