全网 灰色主题实现原理

把网站做成一个纯灰色主题,最简单直接的办法就是给整个网站加一个滤镜
效果图如下:
全网 灰色主题实现原理_第1张图片
css中有以下几种滤镜:
全网 灰色主题实现原理_第2张图片
全网 灰色主题实现原理_第3张图片

全网 灰色主题实现原理_第4张图片
全网 灰色主题实现原理_第5张图片

做灰色主题的网页,我们要选择灰度grayscale这个滤镜。
属性写法:

filter: grayscale();

全网 灰色主题实现原理_第6张图片
网站要做纯灰色,也就是灰得最彻底,所以选择100%。

filter: grayscale(100%);    
-webkit-filter: grayscale(100%);    //兼容chrome和safari
-moz-filter: grayscale(100%);     //兼容Firefox
-ms-filter: grayscale(100%);     //兼容IE、Edge
-o-filter: grayscale(100%);       //兼容Opera

你可能感兴趣的:(css,css,前端)