CSS代码实现网页一键变灰功能

发表时间: 2024-07-16 22:05

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1100+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 CSS 代码片段，应用灰度效果，让页面变成黑白显示。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

body {  filter: grayscale(1); // 1相当于100%}

分享原因

这段代码展示了如何使用 CSS 滤镜来将整个网页变为灰度效果。

在特殊的日子里，网页有整体变灰色的需求，可以使用这段代码，这个需求很有必要。

再就是做一些老照片或黑白电影的效果，也可以使用这段代码。

代码解析

1. 选择器 body

这一部分选择了 HTML 文档的 <body> 元素，即整个网页的主体。

CSS 的 filter 属性通常用于图像，但也可以应用到其他任何 HTML 元素上。

2. grayscale(1);

grayscale 滤镜将元素的颜色变成灰度效果。

参数 1 表示 100% 灰度，参数 0 表示无灰度效果。

3. filter 所有属性值大盘点！

CSS 的 filter 属性提供了多种图形效果，且这些属性值可以组合用起来，且可以应用于任何元素。

以下是 filter 属性的所有值及其详细解释：

blur()

功能：应用模糊效果。

参数：接受一个长度值（如 px、em），默认值是 0。

示例：filter: blur(5px);

brightness()

功能：调整图像的亮度。

参数：接受一个数值，1 为原始亮度。值小于 1 会降低亮度，值大于 1 会增加亮度。

示例：filter: brightness(0.5);

contrast()

功能：调整图像的对比度。

参数：接受一个数值，1 为原始对比度。值小于 1 会降低对比度，值大于 1 会增加对比度。

示例：filter: contrast(200%);

drop-shadow()

功能：应用阴影效果。

参数：类似于 box-shadow，包括偏移量、模糊半径和颜色。

示例：filter: drop-shadow(10px 10px 10px #000);

grayscale()

功能：将图像变为灰度。

参数：接受一个 0 到 1 之间的数值，0 为无灰度，1 为完全灰度。

示例：filter: grayscale(1);

hue-rotate()

功能：旋转图像的色相。

参数：接受一个角度值，单位为度（deg）。

示例：filter: hue-rotate(90deg);

invert()

功能：反转图像的颜色。

参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全反转。

示例：filter: invert(1);

opacity()

功能：调整图像的透明度。

参数：接受一个 0 到 1 之间的数值，0 为完全透明，1 为完全不透明。

示例：filter: opacity(0.5);

saturate()

功能：调整图像的饱和度。

参数：接受一个数值，1 为原始饱和度。值小于 1 会降低饱和度，值大于 1 会增加饱和度。

示例：filter: saturate(2);

sepia()

功能：将图像变为棕褐色。

参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全棕褐色。

示例：filter: sepia(1);

url()

功能：引用 SVG 滤镜。

参数：接受一个 URL，指向一个包含 SVG 滤镜的文件。

示例：filter: url(#filter-id);

- end -

CSS代码实现网页一键变灰功能

热门阅读

推荐阅读