CSS 实现全网灰色主题实现原理及其他滤镜

前言

在一些特殊日子某些网站会把主题调城灰色，已标识重要意义。其实实现也很简单，就是利用滤镜grayscale。

上代码

filter: grayscale();

filter是滤镜属性，grayscale是灰度属性值，grayscale括号里面可以是0、1或者百分比、小数
括号里的数值越大，灰得越彻底。数值越小，原色保留得越好。

filter: grayscale(100%);  // 彻底灰掉

其他滤镜

1. 高斯模糊

filter:blur(10px); // 值越大越模糊，不接受百分比值。

2. 透明度

filter: opacity(.4);

值为0%则是完全透明，值为100%则图像无变化。
该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

3. 明度

filter: brightness(50%); 

如果值是0%，图像会全黑。值是100%，则图像无变化

4. 饱和度

filter: saturate(50%);

值为0%则是完全不饱和，值为100%则图像无变化。
超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

5. 对比度

filter: contrast(50%);

值是0%的话，图像会全黑。值是100%，图像不变。
值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

6. 色相旋转

filter: hue-rotate(45deg);

值为0deg，则图像无变化。若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。

7. 图像反转

filter: invert(50%);

100%的价值是完全反转。值为0%则图像无变化。
值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

8. 褐色滤镜

filter: sepia(50%);

值为100%则完全是深褐色的，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；