王鹏飞

Blog

Tutorial

About

CSS

2021年8月6日

css filter属性详解

最近琢磨着把网站主题色更改一下,看到了一篇文章Dark Mode in One Line of Code,作者讲述了如何用一句代码将网站主题色更改成相反色,这样网站就可以拥有有白天模式和黑夜模式了。

html {
    filter: invert(1);
}

使用上面的代码,可以很方便的将页面颜色反转,达到黑夜模式的效果。但是我并不推荐以这种方式去给网站增加黑夜模式,因为这句代码会将页面中的图片的像素颜色也进行反转,所以效果并不是很好。

但是filter属性的确很强大,所以我就在这里介绍一下这个属性。

一.语法

MDN中是这样描述的:

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

翻译过来就是,filter属性可以为元素添加模糊或颜色偏移等图形效果。一般用来调整图片、背景和边框的渲染。

具体语法如下:

filter: <filter-function> [<filter-function>]* | none

filter函数有:grayscaleblursepiasaturateopacitybrightnesscontrasthue-rotateinvert。大部分函数的参数范围为0-1数字之间,其中blur函数参数为任意数字后接px单位,hue-rotate函数参数为一个整数后接deg单位。

二.filter函数

grayscale

grayscale用于调整元素的灰度值。参数范围为0-1,0表示无效果,1表示灰度最大。

第一张图片filter: grayscale(1)

blur

blue用于调整图片模糊度的。参数为大于0的数字,后接px单位。

第一张图片filter: blur(5px)

sepia

sepia用于调整元素的褐色程度。参数范围为0-1。

第一张图片filter: sepia(1)

saturate

调整元素的饱和度。参数范围为0-1。

第一张图片filter: saturate(0),第二张图片filter: saturate(1),饱和度为0与灰度值为1效果类似。

opacity

调整元素的透明度。参数范围为0-1,0表示完全透明,1表示完全不透明。

第一张图片filter: opacity(0.2),第二张图片filter: opacity(1)。css也有一个opacity属性可以调整元素透明度,用法一样。

brightness

brightness用于调整元素的亮度。范围为0-1,0表示全黑,1表示最亮。

第一张图片filter: brightness(0),显示为黑色。

contrast

调整元素的对比度。默认值为1,表示与原图一致,取值小于1时,对比度降低,取值大于1时表示对比度增大。

图片一filter: contrast(0.2),图片二filter: contrast(3),图片三为默认值1。

hue-rotate

色相旋转,取值为角度值,单位为deg

第一张图片filter: hue-rotate(40deg)

invert

将元素的颜色反转。参数范围为0-1,默认值为0。

第一张图片filter: invert(1)

附:参考资料

(完)

留言(0


发表评论

邮箱地址不会被公开。*表示必填项