【前端CSS】网站都变成灰色了，它是怎么实现的？（含源代码解析）

忘是亡心i 2023-10-02 23:36 5阅读 0赞

#### 目录：网站都变成灰色了，它是怎么实现的？ ####

*   *  一、前言
     *  二、如何实现的
     *  三、代码的理解
     *   *  3.1 CSS3 filter(滤镜) 属性
         *  3.2 定义和使用
         *   *  3.2.1 CSS动画演示
             *  3.2.2 JS语法演示
         *  3.3 浏览器支持
         *  3.4 CSS 语法
         *  3.5 Filter 函数
     *  四、实例展示
     *   *  4.1 模糊实例
         *  4.2 Brightness 函数实例
         *  4.3 Contrast 函数实例
         *  4.4 drop-shadow 函数实例
         *  4.5 Grayscale 函数实例
         *  4.6 hue-rotate() 函数实例
         *  4.7 Invert 函数实例
         *  4.8 Opacity 函数实例
         *  4.9 Saturate 函数实例
         *  4.10 Sepia 函数实例
         *  4.11 复合函数
     *  五、所有滤镜实例

### 一、前言 ###

在最近几天的上网中，想必大家都看到了，很多网站、APP 在都变灰了，变灰的原因是为了纪念一位伟人。

先来看一下变灰后的网站：

![在这里插入图片描述][e735eb7cb5b6455c9421fc020ba56782.png]  
![在这里插入图片描述][1aaea48b4611467a90612a3e482048ce.png]

这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？

### 二、如何实现的 ###

*  换一套灰色的 UI，那显然成本太大了，这种方法不会使用；

我们打开浏览器的开发者工具，`F12`。

![在这里插入图片描述][8322130843454f3dbae84ffe10da8e07.png]

用元素选择器定位到 `HTML` 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码：  
![在这里插入图片描述][0d58f8fbbab64995b757bd92d232e46b.png]

我把它复制过来大家看一下：

-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

打开我的博客主页，并没有变成灰色：

![在这里插入图片描述][11db800c859e4d71ae47dd66f75b8b5b.png]  
![在这里插入图片描述][4f4f7102db3f452e9e1cb3b5bf9a2d93.png]

然后把之前的代码添加到 HTML 上，然后就可以看到色系变成灰色了：

![在这里插入图片描述][fb8056d1f349413cbf11be0658c30ccc.png]

这个颜色不够明显，我们换一下淘宝网：

![在这里插入图片描述][ced403ac1c3d4548b71783d87222b2b2.png]

原网页为彩色的，我们按照上面的方法来看一下能否实现变灰：

![在这里插入图片描述][e597fd00623843ddbd6433e47b9b8434.png]  
可以看到完全变灰了！

### 三、代码的理解 ###

那这段代码是什么意思呢？

#### 3.1 CSS3 filter(滤镜) 属性 ####

实例:修改所有图片的颜色为黑白 (100% 灰度):

img {
        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(100%);
    }

我们来测试一下：

首先是不带滤镜的：

![在这里插入图片描述][b8575207050e41ac8917b5f50481b31a.png]

接下来看一下灰化50%之后的：

![在这里插入图片描述][5a331d3f18204354b57f9cde04001bcb.png]  
然后是灰化100%：

![在这里插入图片描述][4afd2fe5d24b40ec8b6af5a3d027f74c.png]

这里分享一下源代码：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
          
        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(100%);
    }
    </style>
    </head>
    <body>
    
    <p>图片转为黑白色:</p>
    
    <img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    
    <p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
    
    </body>
    </html>

#### 3.2 定义和使用 ####

`filter` 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)：  
![在这里插入图片描述][e19c7b5c5d2c4551ba4ebb0a8982e1b2.png]

##### 3.2.1 CSS动画演示 #####

https://www.runoob.com/cssref/css-animatable.html

##### 3.2.2 JS语法演示 #####

https://www.runoob.com/try/try.php?filename=trycss3_js_filter

#### 3.3 浏览器支持 ####

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

![在这里插入图片描述][12de4feedeed47b180d2e607647a7b9e.png]  
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

#### 3.4 CSS 语法 ####

提示: 使用空格分隔多个滤镜。

#### 3.5 Filter 函数 ####

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

![在这里插入图片描述][184537e7dee14f25b1e1e57916924068.png]  
![在这里插入图片描述][038b47ac3f89419f9db210d8b294d182.png]  
![在这里插入图片描述][c0e2bc83139448c6bf6f56c1ef5048db.png]

### 四、实例展示 ###

#### 4.1 模糊实例 ####

图片使用高斯模糊效果：

img {
        -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
        filter: blur(5px);
    }

![在这里插入图片描述][8c642e8daae74ac8867566fc910f07aa.png]

#### 4.2 Brightness 函数实例 ####

使图片变亮:

img {
        -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
        filter: brightness(200%);
    }

![在这里插入图片描述][d1e759d74bda4d719926215c97fd8f32.png]

#### 4.3 Contrast 函数实例 ####

调整图像的对比度:

img {
        -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
        filter: contrast(200%);
    }

![在这里插入图片描述][a8bf0364d37345cb9712369381a5d859.png]

#### 4.4 drop-shadow 函数实例 ####

给图像设置一个阴影效果:

img {
        -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
        filter: drop-shadow(8px 8px 10px red);
    }

![在这里插入图片描述][8dae6f93d6624309ae76a318ef4b7c8e.png]

#### 4.5 Grayscale 函数实例 ####

将图像转换为灰度图像:

img {
        -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
        filter: grayscale(50%);
    }

![在这里插入图片描述][cbebb0d3f847475fab815d0be706b79c.png]

#### 4.6 hue-rotate() 函数实例 ####

给图像应用色相旋转:

img {
        -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
        filter: hue-rotate(90deg);
    }

![在这里插入图片描述][2b31f34db40f4fd0aa92af5aa1ee778e.png]

#### 4.7 Invert 函数实例 ####

反转输入图像:

img {
        -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
        filter: invert(100%);
    }

![在这里插入图片描述][21446e523ea641a1a3d0d554ab96f211.png]

#### 4.8 Opacity 函数实例 ####

转化图像的透明程度:

img {
        -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
        filter: opacity(30%);
    }

![在这里插入图片描述][c6a4b0472b5042c58f6679271931701d.png]

#### 4.9 Saturate 函数实例 ####

转换图像饱和度:

img {
        -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
        filter: saturate(800%);
    }

![在这里插入图片描述][4b279afb2b4448e382529d9e28adfa92.png]

#### 4.10 Sepia 函数实例 ####

将图像转换为深褐色:

img {
        -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
        filter: sepia(100%);
    }

![在这里插入图片描述][036e04bfd5864041b6a971db2fd12514.png]

#### 4.11 复合函数 ####

使用多个滤镜，每个滤镜使用空格分隔。

注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

img {
        -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
        filter: contrast(200%) brightness(150%);
    }

![在这里插入图片描述][c82764862a5f41428abbe27729659599.png]

### 五、所有滤镜实例 ###

以下实例演示了所有滤镜的使用方法:

.blur {
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }
    
    .brightness {
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
    }
    
    .contrast {
        -webkit-filter: contrast(180%);
        filter: contrast(180%);
    }
    
    .grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    
    .huerotate {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
    }
    
    .invert {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    
    .opacity {
        -webkit-filter: opacity(50%);
        filter: opacity(50%);
    }
    
    .saturate {
        -webkit-filter: saturate(7);
        filter: saturate(7);
    }
    
    .sepia {
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
    }
    
    .shadow {
        -webkit-filter: drop-shadow(8px 8px 10px green);
        filter: drop-shadow(8px 8px 10px green);
    }

![在这里插入图片描述][c6396d63025648f3ad73610805089952.png]

[e735eb7cb5b6455c9421fc020ba56782.png]: https://img-blog.csdnimg.cn/e735eb7cb5b6455c9421fc020ba56782.png
[1aaea48b4611467a90612a3e482048ce.png]: https://img-blog.csdnimg.cn/1aaea48b4611467a90612a3e482048ce.png
[8322130843454f3dbae84ffe10da8e07.png]: https://img-blog.csdnimg.cn/8322130843454f3dbae84ffe10da8e07.png
[0d58f8fbbab64995b757bd92d232e46b.png]: https://img-blog.csdnimg.cn/0d58f8fbbab64995b757bd92d232e46b.png
[11db800c859e4d71ae47dd66f75b8b5b.png]: https://img-blog.csdnimg.cn/11db800c859e4d71ae47dd66f75b8b5b.png
[4f4f7102db3f452e9e1cb3b5bf9a2d93.png]: https://img-blog.csdnimg.cn/4f4f7102db3f452e9e1cb3b5bf9a2d93.png
[fb8056d1f349413cbf11be0658c30ccc.png]: https://img-blog.csdnimg.cn/fb8056d1f349413cbf11be0658c30ccc.png
[ced403ac1c3d4548b71783d87222b2b2.png]: https://img-blog.csdnimg.cn/ced403ac1c3d4548b71783d87222b2b2.png
[e597fd00623843ddbd6433e47b9b8434.png]: https://img-blog.csdnimg.cn/e597fd00623843ddbd6433e47b9b8434.png
[b8575207050e41ac8917b5f50481b31a.png]: https://img-blog.csdnimg.cn/b8575207050e41ac8917b5f50481b31a.png
[5a331d3f18204354b57f9cde04001bcb.png]: https://img-blog.csdnimg.cn/5a331d3f18204354b57f9cde04001bcb.png
[4afd2fe5d24b40ec8b6af5a3d027f74c.png]: https://img-blog.csdnimg.cn/4afd2fe5d24b40ec8b6af5a3d027f74c.png
[e19c7b5c5d2c4551ba4ebb0a8982e1b2.png]: https://img-blog.csdnimg.cn/e19c7b5c5d2c4551ba4ebb0a8982e1b2.png
[12de4feedeed47b180d2e607647a7b9e.png]: https://img-blog.csdnimg.cn/12de4feedeed47b180d2e607647a7b9e.png
[184537e7dee14f25b1e1e57916924068.png]: https://img-blog.csdnimg.cn/184537e7dee14f25b1e1e57916924068.png
[038b47ac3f89419f9db210d8b294d182.png]: https://img-blog.csdnimg.cn/038b47ac3f89419f9db210d8b294d182.png
[c0e2bc83139448c6bf6f56c1ef5048db.png]: https://img-blog.csdnimg.cn/c0e2bc83139448c6bf6f56c1ef5048db.png
[8c642e8daae74ac8867566fc910f07aa.png]: https://img-blog.csdnimg.cn/8c642e8daae74ac8867566fc910f07aa.png
[d1e759d74bda4d719926215c97fd8f32.png]: https://img-blog.csdnimg.cn/d1e759d74bda4d719926215c97fd8f32.png
[a8bf0364d37345cb9712369381a5d859.png]: https://img-blog.csdnimg.cn/a8bf0364d37345cb9712369381a5d859.png
[8dae6f93d6624309ae76a318ef4b7c8e.png]: https://img-blog.csdnimg.cn/8dae6f93d6624309ae76a318ef4b7c8e.png
[cbebb0d3f847475fab815d0be706b79c.png]: https://img-blog.csdnimg.cn/cbebb0d3f847475fab815d0be706b79c.png
[2b31f34db40f4fd0aa92af5aa1ee778e.png]: https://img-blog.csdnimg.cn/2b31f34db40f4fd0aa92af5aa1ee778e.png
[21446e523ea641a1a3d0d554ab96f211.png]: https://img-blog.csdnimg.cn/21446e523ea641a1a3d0d554ab96f211.png
[c6a4b0472b5042c58f6679271931701d.png]: https://img-blog.csdnimg.cn/c6a4b0472b5042c58f6679271931701d.png
[4b279afb2b4448e382529d9e28adfa92.png]: https://img-blog.csdnimg.cn/4b279afb2b4448e382529d9e28adfa92.png
[036e04bfd5864041b6a971db2fd12514.png]: https://img-blog.csdnimg.cn/036e04bfd5864041b6a971db2fd12514.png
[c82764862a5f41428abbe27729659599.png]: https://img-blog.csdnimg.cn/c82764862a5f41428abbe27729659599.png
[c6396d63025648f3ad73610805089952.png]: https://img-blog.csdnimg.cn/c6396d63025648f3ad73610805089952.png