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

【前端CSS】网站都变成灰色了，它是怎么实现的？（含源代码解析）
目录：网站都变成灰色了，它是怎么实现的？
- 一、前言
  二、如何实现的
  三、代码的理解
  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 在都变灰了，变灰的原因是为了纪念一位伟人。

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

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

二、如何实现的
- 换一套灰色的 UI，那显然成本太大了，这种方法不会使用；
我们打开浏览器的开发者工具，F12。

用元素选择器定位到 HTML 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码：

我把它复制过来大家看一下：
```
-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);
1
2
3
4
5
6
```
打开我的博客主页，并没有变成灰色：

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

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

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

可以看到完全变灰了！

三、代码的理解

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

3.1 CSS3 filter(滤镜) 属性

实例:修改所有图片的颜色为黑白 (100% 灰度):
```
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
1
2
3
4
```
我们来测试一下：

首先是不带滤镜的：

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

然后是灰化100%：

这里分享一下源代码：
```
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
```
3.2 定义和使用

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)：

3.2.1 CSS动画演示
```
https://www.runoob.com/cssref/css-animatable.html
1
```
3.2.2 JS语法演示
```
https://www.runoob.com/try/try.php?filename=trycss3_js_filter
1
```
3.3 浏览器支持

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

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

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

3.4 CSS 语法
```
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
1
```
提示: 使用空格分隔多个滤镜。

3.5 Filter 函数

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

四、实例展示

 4.1 模糊实例

图片使用高斯模糊效果：
```
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
1
2
3
4
```
4.2 Brightness 函数实例

使图片变亮:
```
img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
1
2
3
4
```
4.3 Contrast 函数实例

调整图像的对比度:
```
img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
1
2
3
4
```
4.4 drop-shadow 函数实例

给图像设置一个阴影效果:
```
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
1
2
3
4
```
4.5 Grayscale 函数实例

将图像转换为灰度图像:
```
img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}
1
2
3
4
```
4.6 hue-rotate() 函数实例

给图像应用色相旋转:
```
img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}
1
2
3
4
```
4.7 Invert 函数实例

反转输入图像:
```
img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}
1
2
3
4
```
4.8 Opacity 函数实例

转化图像的透明程度:
```
img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}
1
2
3
4
```
4.9 Saturate 函数实例

转换图像饱和度:
```
img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}
1
2
3
4
```
4.10 Sepia 函数实例

将图像转换为深褐色:
```
img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}
1
2
3
4
```
4.11 复合函数

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

注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。
```
img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}
1
2
3
4
```
五、所有滤镜实例

以下实例演示了所有滤镜的使用方法:
```
.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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
```
相关阅读:
python基于django的智能短视频推荐系统 nodejs 前后端分离
 SOLIDWORKS工程图BOM表子装配体显示控制
 前端 vite+vue3——写一个随机抽奖组件
 【Spring Cloud实战】Spring Cloud Bus消息总线
 【C#】FileInfo类对文件进行操作
 本地部署开发环境过程和遇到的问题总结
 VSCode插件开发概述
 vue2+element医院安全（不良）事件报告管理系统源代码
 《C和指针》笔记35：结构体
 《第一堂棒球课》：王牌三垒手·棒球5号位
原文地址：https://blog.csdn.net/wzk4869/article/details/128180333

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

一、前言

二、如何实现的

三、代码的理解

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 复合函数

五、所有滤镜实例