image - 如何仅使用 CSS3 更改图像颜色(图像有灰色阴影)？

Question

如果您能帮助我仅使用 CSS3 更改图像颜色(图像有灰色阴影)，我将不胜感激。

使用 CSS3 的一些属性，例如过滤器...在此先感谢您!

Answer 1

您可以通过在图像顶部叠加一个伪元素并使用 mix-blend-mode 来实现此目的属性(检查 browser support )。对于下面的示例，我使用了 overlay。

*{box-sizing:border-box;margin:0;padding:0;}
figure{
    display:inline-block;
    position:relative;
}
img{
    vertical-align:middle;
}
figure::after{
    background:#f00;
    bottom:0;
    content:"";
    left:0;
    mix-blend-mode:overlay;
    opacity:.75;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
}

<figure>
    <img alt="" height="250" src="https://unsplash.it/500/250?image=1082&gravity=south" width="500">
</figure>