filter属性实现网页页面全灰色调

各大网站都是怎么实现网页灰色调的呢？

• 要一个样式一个样式的更改整个页面的各种图像、边框等的颜色为灰色调是不现实的（如果已经事先写好两套样式的另说）。其实大部分网站都是在html元素上用了filter这个属性，例：

html {
  filter: grayscale(90%);
}

几个网站页面截图例子

filter是什么？

• filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。在MDN的例子：
  

filter可以设置的值

• 有：none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()。

• none：没有效果，默认值。例子和效果：

html {
	filter: none;
}

• blur()：该函数可设置css长度值，但不接受百分比值。给图像设置高斯模糊。例子和效果：

html {
	filter: blur(5px);
}

• brightness()：接受百分比的值（%）或者小数，给图像应用一种线性乘法，看起来会更亮或更暗（0%为全黑，100%为图像原本的亮度，可以超过100%）。例子和效果：

html {
	filter: brightness(50%);
}

• contrast()：接受百分比的值（%）或者小数，调整图像的对比度（0%为全黑，100%为图像原本的对比度，可以超过100%）。例子和效果：

html {
	filter: contrast(20%);
}

• drop-shadow()：给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。可以接受5个参数，第一个是x轴偏移值（必填），第二个是y轴偏移值（必填），第三个是z轴偏移值（选填），第四个控制阴影放大缩小（选填），第五个是阴影颜色（选填）。例子和效果（Tips：Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染）：

html {
	filter: drop-shadow(10px 10px 10px red);
}

• grayscale()：接受百分比的值（%）或者小数。将图像转换为灰度图像（为100%则完全转为灰度图像，值为0%图像无变化）。例子和效果：

html {
	filter: grayscale(90%);
}

• hue-rotate()：能接受deg单位的值。给图像应用色相旋转，设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。没有最大值，超过360deg的值相当于又绕一圈。例子和效果：

 html {
	filter: hue-rotate(90deg);
}

• invert()：接受百分比的值（%）或者小数。反转输入图像。值定义转换的比例。100%是完全反转，0%则无变化。例子和效果：

html {
	filter: invert(100%);
}

• opacity()：接受百分比的值（%）或者小数。转化图像的透明程度。0%则完全透明，100%则图像无变化。例子和效果：

 html {
	filter: opacity(30%);
}

• saturate()：接受百分比的值（%）或者小数。转换图像饱和度。0%则是完全不饱和，100%则图像无变化（可以超过100%）。例子和效果：

html {
	filter: saturate(30%);
}

• sepia()：接受百分比的值（%）或者小数。将图像转换为深褐色。值定义转换的比例。100%则完全是深褐色的，0%图像无变化。例子和效果：

html {
	filter: sepia(100%);
}

• url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例子：

html {
	filter: url(test.svg#img-id);
}

Tips

• filter详细使用以及介绍可以参考：
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter