有没有一种方法可以在<img>
标签上应用背景颜色?
<img src="abc.jpg" style="background-color:red;">
以上代码无法运行。
请帮帮我。
谢谢。
是的,这是可能的。你只需要对图片应用内边距(padding),然后你可以得到以下结果:
或者
你也可以使用.png图片并应用透明属性。
img {
max-width: 50%;
}
<img src="http://pngimg.com/uploads/mario/mario_PNG53.png" style="background-color:red;padding:20px;">
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">
html
代码,因为它是通过脚本生成的。 - vjy tiwariimg
标签 - 就像问题中一样。 - Danield由于您使用了Slick滑块,您可能希望像下面的示例那样进行操作。正如之前所注意到的,您也可能希望使用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 标签,如下: