除了 filter 还有什么置灰网站的方式？？？

作者: 菲儿_cdd4 | 来源:发表于2022-12-13 18:34 被阅读0次

网站置灰
网站置灰
App置灰或则页面置灰
交互-按钮置灰与不置灰
css filter 的坑
除了黑与白，还有灰
android view置灰(哀悼日)
置灰
android view置灰(哀悼日)
使用filter滤镜导致界面布局混乱问题

某天晚上接到一个临时加班需求：实现网站的变灰的需求。

我的第一反应是重新设计的新图片(现在回想起来：我当时的脑袋估计是被门挤了o(╥﹏╥)o），产品让我去各大网站浏览了一圈，我赶紧按下了F12打开浏览器控制台选中网站的图片，然而图片并不是灰色的，细细查看终于让我发现了这行神奇的代码filter: grayscale(100%);

今天专门把实现的效果整理成一篇文章（主要整理的方式有首页整体变灰和首屏变灰两种，如果有其他的实现方案可以留言告知哟）

1、首页整体变灰

实现效果：

1671003618491.gif

代码部分

html {
        filter: grayscale(95%);
        -webkit-filter: grayscale(95%);
        -moz-filter: grayscale(95%);
        -ms-filter: grayscale(95%);
        -o-filter: grayscale(95%);
    }

该方案可以满足大部分的需求，但也有需求是只要求首屏置灰，下拉滚动时非首屏不需要置灰，这个时候该怎么办呢？继续往下看呗~~

2、首屏变灰

2-1、backdrop-filter: grayscale()

效果图：

1671003334877.gif

代码部分

html {
            position: relative;
            width: 100%;
            height: 100%;
        }
        html::before {
            content: "";
            position: absolute;
            backdrop-filter: grayscale(100%);
            inset: 0;
            z-index: 100;
        }

现在我这边只是写了一个简单的没有交互的demo，如果我们页面存在大量交互的时候该怎么办呢？？？

借助pointer-events: none来保证页面交互

 html::before {
            content: "";
            position: absolute;
            backdrop-filter: grayscale(100%);
            pointer-events: none;
            inset: 0;
            z-index: 100;
        }

backdrop-filter: grayscale(100%);的实现效果很nice，但是很多旧版本的火狐不支持呀？火狐用户肿么办？让所有旧版本的火狐用户升级（距离离职又近了一步）！！！

除了 filter 和 backdrop-filter 外，CSS 中另外一个能对颜色进行一些干预及操作的属性就是 mix-blend-mode 和 background-blend-mode 了

2-2、mix-blend-mode替代backdrop-filter的一种方案

代码部分

html {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: scroll;
        background: #fff;
      }
html::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 1);
        mix-blend-mode: color;
        pointer-events: none;
        z-index: 10;
      }

总结：
1、如果实现网页全部置灰 filter: grayscale();
2、如果实现首屏置灰backdrop-filter: grayscale();一定要配合pointer-events: none;
3、对于需要更好兼容性的，使用混合模式的 mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式

文章就更新到这里了，如果有什么不足或者更好的方案请多多指正！！！