css滤镜+图片变灰

CSS滤镜是一种非常有用且常用的CSS特性，它可以通过修改元素的外观来改变其呈现效果。其中一种比较常见的滤镜是将图片变为灰色。

img {
filter: grayscale(100%);
}

通过设置滤镜属性的值为100%，我们可以将图片完全变为黑白灰度。当然，我们可以根据需求调整滤镜的程度来实现不同的效果。

实现图片变灰还有一种方法，可以通过CSS3的混合模式来实现。具体代码如下：

.img-gray {
mix-blend-mode: luminosity;
filter: brightness(0) saturate(100%);
}

以上代码将图片的混合模式设置为luminosity，同时通过brightness和saturate属性将图片的亮度和饱和度都设置为最低值，从而实现灰色效果。

总之，CSS滤镜是实现各种图片效果的非常强大工具，通过掌握其不同的属性和方法，我们可以轻松实现各种想要的UI效果。

查看更多关于css滤镜+图片变灰的详细内容...