一行代码实现前端代码网页置灰以及正确的避坑姿势

theme: juejin

前言

某些特殊的时期，会有前端置灰页面的需求，今天从前端的角度来聊聊网页置灰的实现方式和正确的避坑姿势

现有主流网站的实现方式

1. B站

2. 京东

3. 掘金

基本上都是用的同一个方法，就是css3 新增的一个属性
filter: grayscale(100%);

css3的filter属性的用法

filter 这个用法及兼容性问题我就不过多写，感兴趣的可以mdn查或移步这位老哥的文章

存在的问题

配置了 css filter 属性的元素，其子元素的 fixed 定位会失效。

导致原因：
先看看w3c对filter 的描述

也就是说：对于指定了 filter 样式且值不为 none 时，被应用该样式的元素其子元素中如果有 position 为 absolute 或 fixed 的元素，会为这些元素创建一个新的容器，使得这些绝对或固定定位的元素其定位的基准相对于这个新创建的容器;基准不一样那自然定位的位置肯定不能复合我们的预期
解决办法：
w3c里对 filter 的描述说 filter 应用到根节点，则不会创建新的容器。所以写到根元素上面：

html{
    filter: grayscale(100%);
}

其实现在的各大网站也是这样做的；其实还有另一个点就是 css filter 属性会导致元素的z-index被提升，可覆盖掉其他元素；这时需要注意调整z-index的层级

filter的性能问题

导致原因： filter有性能杀手之称；主要原因是滤镜动画需要大量的计算，会导致页面不断重绘，所以非常消耗性能
解决办法： 开启 硬件加速，硬件加速看起来很牛逼的一个词汇，感兴趣可以看这篇文章
所以可以通过

 transform: translate3d(0, 0, 0);

开启硬件加速，解决因为使用了filter属性出现网页卡帧的问题

总结

本文主要介绍前端如何把网页置灰，以及置灰可能会出现的问题以及解决方案；谢谢阅读！