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

news2024/11/15 17:53:14

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

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

在这里插入图片描述

这里分享一下源代码：

<!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 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)：
在这里插入图片描述

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

在这里插入图片描述