简单、好用、强大的css滤镜磨砂玻璃效果#前端

神奇的滤镜：磨砂玻璃效果。

今天我们来看一些常用的css效果。这是一个很常见的磨砂玻璃效果，代码很简单。

·一个半透明的元素盖在一行文字的上面，看到模糊效果第一想到的肯定是filter了。我们加上filter看看效果，可以看见模糊效果是有了，但和我们的预期是完全不符的。这块有一个误区需要搞清楚，我们给这个伪元素加点内容，效果一目了然。filter是针对元素自身的，所以要实现磨砂玻璃的效果filter是肯定不行的。

Ai已经给出了提示，我们姑且试一试。效果已经有了，我们把模糊值改小一些增加一些透明度，这个效果和我们的预期完全相符了。记住这个API"backdrop-filter"是针对当前元素后面的内容。

·我们再来看另一个效果，鼠标移入页面变成了彩色，移出又变成了黑白。我们看看这个效果该怎么做？首先肯定需要一张图片，图片的上面肯定是有一个遮罩层的。我们来写一下遮罩层的样式，用我们前面使用过得back drop filter API试试看有什么效果。过滤一下灰度值，可以看到图片已经变成了黑白色。

·接下来我们做一下遮罩层的拉幕效果，当鼠标移入的时候把遮罩层的宽度变成0，给遮罩层加一个过渡。看看最终的效果，鼠标移入变成彩色，移出恢复黑白。

关于css滤镜还有很多用处，比如网站一键变黑白，我们只需要给body添加一个灰度滤镜即可。是不是很简单？任意网站一键变灰，一个滤镜全部搞定。