css filter属性详解

css filter属性详解

文章中codepen例子，无法实时预览，可以在这里获得更好阅读体验。

最近琢磨着把网站主题色更改一下，看到了一篇文章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函数有：grayscale、blur、sepia、saturate、opacity、brightness、contrast、hue-rotate和invert。大部分函数的参数范围为0-1数字之间，其中blur函数参数为任意数字后接px单位，hue-rotate函数参数为一个整数后接deg单位。

二.filter函数

grayscale

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

See the Pen css filter: grayscale by Pengfei Wang ( @AhCola) on CodePen.

第一张图片filter: grayscale(1)。

blur

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

See the Pen css filter: blur by Pengfei Wang ( @AhCola) on CodePen.

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

sepia

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

See the Pen css filter: sepia by Pengfei Wang ( @AhCola) on CodePen.

第一张图片filter: sepia(1)。

saturate

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

See the Pen css filter: saturate by Pengfei Wang ( @AhCola) on CodePen.

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

opacity

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

See the Pen css filter: opacity by Pengfei Wang ( @AhCola) on CodePen.

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

brightness

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

See the Pen css filter: brightness by Pengfei Wang ( @AhCola) on CodePen.

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

contrast

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

See the Pen css filter: contrast by Pengfei Wang ( @AhCola) on CodePen.

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

hue-rotate

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

See the Pen css filter: hue-rotate by Pengfei Wang ( @AhCola) on CodePen.

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

invert

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

See the Pen css filter: invert by Pengfei Wang ( @AhCola) on CodePen.

第一张图片filter: invert(1)。

附：参考资料

• css filters: https://davidwalsh.name/css-filters
• dark mode: https://davidwalsh.name/dark-mode-invert-filter
• mdn: filter

（完）