本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!
大家好,我是大澈!
本文约 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 -