使用css样式盘点最近App首页、网站首页变灰色的几种方式

熊泽有话说 2022-12-05

689

1、filter
2、svg
3、backdrop-filter
4、混合模式
5、样式源码提取

如果有一些重大事件发生的时候，网站、APP可能需要置灰，像是这样：

最近各大网站、APP的首页最近都变成了灰色。

对于大部分前端同学来说，全站置灰是非常简单的事情，只需要使用一行 CSS就能实现全站置灰。
像下面这个方式，我们仅仅需要给 HTML 添加一个统一的滤镜即可：

1、filter

html {
    filter: grayscale(.95);
    -webkit-filter: grayscale(.95);
}

这里借借助了CSS3 filter(滤镜) 属性，大家可以去看下详细使用方式：https://www.runoob.com/cssref/css3-pr-filter.html 。

又或者，使用 SVG 滤镜（注意也要添加样式），也可以快速实现网站的置灰：

2、svg

<div>
// 这是网站内
</div>


<svg xmlns="https://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

<style>
    html {
        filter: url(#grayscale);
    }
</style>

设置以后效果对比图如下：

我们大部分问题都可以这样解决，不过也有一些例外，例如：

如果我们仅仅需要置灰网站的首屏（如拼多多、淘宝、京东等），当用户开始滑动页面的时候，非首屏部分不需要置灰，如下示意图：

这种只置灰首屏的需求该如何实现呢？

我们可以使用 backdrop-filter 实现滤镜遮罩效果，backdrop-filter 最为常见的使用方式是用其实现毛玻璃效果，

3、backdrop-filter

html {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
}
html::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(95%);
    z-index: 10;
　　pointer-events: none；
}

这样就首页加灰了，我们仅仅是在整个页面上方叠加了一层滤镜蒙版，实现了只对首屏页面的置灰，

注意，如果不添加pointer-events: none这个，那么页面的交互效果失效。

但是这种兼容性并不好，除了 filter
和 backdrop-filter
外，

CSS 中另外一个能对颜色进行一些干预及操作的属性就是 mix-blend-mode
和 background-blend-mode
了，翻译过来就是混合模式，如下：

注意：html 和html::before才是关键，其他的是辅助代码。

4、混合模式

 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;
        }


        body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            gap: 12px;
        }


        div {
            width: 200px;
            height: 200px;
            background: url(https://images.cnblogs.com/cnblogs_com/xiongze520/2251665/t_221205090520_testimage.png) no-repeat;
            background-size: cover;
            cursor: pointer;
            transition: .3s;
        }


        div::hover {
            transform: scale(1.1);
        }

mix-blend-mode: hue; / 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 颜色

总结：

如果你需要全站置灰，使用 CSS 的 filter: grayscale()
对于一些低版本的浏览器，使用 SVG 滤镜通过 filter
引入
对于仅仅需要首屏置灰的，可以使用 backdrop-filter: grayscale()
配合 pointer-events: none
对于需要更好兼容性的，使用混合模式的 mix-blend-mode: hue
、mix-blend-mode: saturation
、mix-blend-mode: color
也都是非常好的方式

有个小技巧，在 CSS 的世界中，但凡和颜色打交道的事情，你都应该想起 filter
、backdrop-filter
和 mix-blend-mode
。

5、样式源码提取

百度网盘链接：https://pan.baidu.com/s/1djtMuONv_53plYgN750Ejg?pwd=xion
提取码：xion

css 网站首页混合模式 css样式

文章转载自熊泽有话说，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

使用css样式盘点最近App首页、网站首页变灰色的几种方式

5、样式源码提取

评论