css置灰属性 模糊属性 滤镜遮罩属性 (一行代码实现)

网站一行代码置灰,原因都知道,是为了纪念一位伟人。这种把整个页面都变成灰色 下面是css便捷属性
置灰实现方式

 filter: grayscale(1);

效果:


模糊度实现方式

 filter: blur(5px);

效果:
css置灰属性 模糊属性 滤镜遮罩属性 (一行代码实现)_第1张图片
最后一种是

 backdrop-filter: blur(20);

可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

注意两者之间的差异,filter 是作用于元素本身,而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。

你可能感兴趣的:(css,前端,javascript)