导航号,我的单页导航
文章目录

前言

众所周知,一般有大事情,很多官方网站的首页就会置灰。对这个比较感兴趣,因此就查询了一下,发现设置全站置灰的方式很简单。

记录一下,方便自己查阅。

PS: 本文内容摘抄的,文末有原作者连接

正文

置灰涉及全屏置灰,另外一种是首屏置灰。下面记录一下置灰的代码。

全屏置灰

方式一

亲测,有效。

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

使用svg滤镜,亲测有效。

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

首屏置灰

就是进入是窗口高度置灰,如果拉新滚动后,超过屏幕高度的位置不置灰。

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

参考文章

  1. 网站置灰的几种方式

© 版权声明
导航号,我的单页导航

暂无评论

暂无评论...