大家看到网站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？

有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是变成生产事故要扣奖金了。

解决方案很简单，只需要几行代码就能搞定了。F12看下各大网站怎么实现的。

百度：

百度

京东：

京东

今日头条：

今日头条

慕课网：

慕课网

给大家总结出一段规范的代码，把这段代码加入网站页面的CSS里面即可实现页面变成灰色的效果：

规范代码

filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);

扩展：CSS3 filter(滤镜)

一、blur(px)高斯模糊

给图像高斯模糊。如果没有设定值，则默认值是0；这个参数可设置css长度值，不接受百分比值

img {   -webkit-filter: blur(5px); /* Chrome, Safari, Opera */   filter: blur(5px);}

二、brightness(%)亮度

使图像看起来更亮或更暗。值是100%，图像无变化，超过100%，变亮，小于100%，变暗。

filter: brightness(150%)

三、contrast(%)对比度

filter: contrast(200%)

四、drop-shadow(x y blur speed color) 阴影效果

filter-shadow: (50px 50px 5px tomato)

与box-shadow效果上有显著的区别

五、grayscale(%)灰度

filter: grayscale(100%)

六、hue-rotate()色相旋转

filter: hue-rotate(100%)

七、invate(%)

反转输入图像。值为100%是完全反转。 值为0%则图像无变化。0%~100%之间，则是效果的线性乘子。

filter: invate(100%)

八、opacity(%)

转化图像的透明度。值为0%则是完全透明。值为100%则图像无变化

filter: opacity(100%)

九、saturate(%)

转换图像的饱和度。值为0%则是完全不饱和，值为100%则图像无变化。值允许大于100%，会有更高的饱和度。

filter: saturate(100%)

十、sepia(%)

将图像转为深褐色。值为100%则完全是深褐色

img { 	-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ 	filter: sepia(100%);}

十一、复合函数

使用多个滤镜，每个滤镜使用空格分割。

注意：顺序是非常重要的（例如使用grayscale()再使用sepia()将产生一个完整的灰度图片）

img { -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%);}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}.invert {-webkit-filter: invert(100%);filter: invert(100%);}.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}.saturate {-webkit-filter: saturate(7); filter: saturate(7);}.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

filter效果示例