置灰网站方式

我带你们飞

已于 2023-03-30 16:34:55 修改

阅读量315

点赞数 1

分类专栏： css 文章标签： css css3 html

于 2023-03-30 16:27:26 首次发布

本文链接：https://blog.csdn.net/weixin_47619284/article/details/129857732

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、为什么置灰网站？

大家肯定注意到，很多网站变成灰色，原因都知道，是为了纪念一位伟人。这种把整个页面都变成灰色，是怎么做到的呢？

二、置灰网站的方法？

其实是非常简单的一个操作，仅仅需要一行代码。

html {
    filter: grayscale(1);
}

使用backdrop-filter实现滤镜遮罩。
在css中有两个和滤镜相关的属性filter和backdrop-filter

filter：不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
backdrop-filter：可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
backdrop-filter：目前兼容性不佳，尤其是安卓移动端。
上图看效果：
在这里插入图片描述

 <header class="box">
        <div>normal</div>
        <div class="filter">filter</div>
        <div class="backdropFilter">backdropFilter</div>
</header>

       .box {
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url(../day01/图片/雪山.jpg) no-repeat;
            background-size: cover;
        }

        div {
            width: 300px;
            height: 200px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            background-color: rgba(255, 255, 255, .5);
        }

        .filter {
            filter: blur(5px);
        }

        .backdropFilter {
            backdrop-filter: blur(5);
        }