Css图片加灰度 |放大缩小css动画

.img {
filter: grayscale(100%);
}

上面这段CSS代码使得图片全局以100%的灰度进行展示。你可以在代码中将100%改为其他数值来改变灰度的程度。例如，如果需要让图片稍微有一点彩色，可以将100%修改为90%或80%。

除了全局灰度，大家还可以使用伪元素方法来实现部分灰度效果。下面这段代码实现的是鼠标悬停在图片上时，图片会部分地变成灰色。

.img:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
mix-blend-mode: color;
}

上面这段代码的实现过程是这样的：首先，大家通过鼠标悬停在图片上这个触发事件，调用CSS中的伪元素before来给图片添加一个黑色的遮罩层。接着，大家通过mix-blend-mode属性的值为color来将图片和该遮罩层进行混合，使得图片达到部分灰度的效果。

CSS中的图片加灰度效果非常实用，无论是在网站设计中还是在博客主题的设计中，都可以让你的设计更加生动、鲜明。快来试试吧！