最近琢磨着把网站主题色更改一下，看到了一篇文章Dark Mode in One Line of Code，作者讲述了如何用一句代码将网站主题色更改成相反色，这样网站就可以拥有有白天模式和黑夜模式了。
html {
filter: invert(1);
}使用上面的代码，可以很方便的将页面颜色反转，达到黑夜模式的效果。但是我并不推荐以这种方式去给网站增加黑夜模式，因为这句代码会将页面中的图片的像素颜色也进行反转，所以效果并不是很好。
但是filter属性的确很强大，所以我就在这里介绍一下这个属性。
MDN中是这样描述的：
The
filterCSS 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>]* | nonefilter函数有：grayscale、blur、sepia、saturate、opacity、brightness、contrast、hue-rotate和invert。大部分函数的参数范围为0-1数字之间，其中blur函数参数为任意数字后接px单位，hue-rotate函数参数为一个整数后接deg单位。
grayscale用于调整元素的灰度值。参数范围为0-1，0表示无效果，1表示灰度最大。
第一张图片filter: grayscale(1)。
blue用于调整图片模糊度的。参数为大于0的数字，后接px单位。
第一张图片filter: blur(5px)。
sepia用于调整元素的褐色程度。参数范围为0-1。
第一张图片filter: sepia(1)。
调整元素的饱和度。参数范围为0-1。
第一张图片filter: saturate(0)，第二张图片filter: saturate(1)，饱和度为0与灰度值为1效果类似。
调整元素的透明度。参数范围为0-1，0表示完全透明，1表示完全不透明。
第一张图片filter: opacity(0.2)，第二张图片filter: opacity(1)。css也有一个opacity属性可以调整元素透明度，用法一样。
brightness用于调整元素的亮度。范围为0-1，0表示全黑，1表示最亮。
第一张图片filter: brightness(0)，显示为黑色。
调整元素的对比度。默认值为1，表示与原图一致，取值小于1时，对比度降低，取值大于1时表示对比度增大。
图片一filter: contrast(0.2)，图片二filter: contrast(3)，图片三为默认值1。
色相旋转，取值为角度值，单位为deg。
第一张图片filter: hue-rotate(40deg)。
将元素的颜色反转。参数范围为0-1，默认值为0。
第一张图片filter: invert(1)。
（完）