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

• • 一、前言
  • 二、如何实现的
  • 三、代码的理解
  • • 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);

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

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

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

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

可以看到完全变灰了！

三、代码的理解

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

3.1 CSS3 filter(滤镜) 属性

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

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

我们来测试一下：

首先是不带滤镜的：

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

然后是灰化100%：

这里分享一下源代码：

图片转为黑白色:
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

3.2 定义和使用

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

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- 为指定浏览器的前缀。

注意: 旧版 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();

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

3.5 Filter 函数

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

四、实例展示

4.1 模糊实例

图片使用高斯模糊效果：

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

4.2 Brightness 函数实例

使图片变亮:

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

4.3 Contrast 函数实例

调整图像的对比度:

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

4.4 drop-shadow 函数实例

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

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

4.5 Grayscale 函数实例

将图像转换为灰度图像:

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

4.6 hue-rotate() 函数实例

给图像应用色相旋转:

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

4.7 Invert 函数实例

反转输入图像:

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

4.8 Opacity 函数实例

转化图像的透明程度:

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

4.9 Saturate 函数实例

转换图像饱和度:

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

4.10 Sepia 函数实例

将图像转换为深褐色:

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

4.11 复合函数

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

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

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

五、所有滤镜实例

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

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