如何网页变成灰色素调

先来看几个效果图

layui社区

在这里插入图片描述

腾讯首页

在这里插入图片描述

CSDN

在这里插入图片描述

百度首页（忘记截图）

实践 - 照猫画虎

先找点HTML页面最好有文字有图片，或者自己随意写几个，这里从网上下载一个简单页面来演示。随意下载一个模板网页，先来预览下未修改前的样式：

在这里插入图片描述

素调 - 方式一：在CSS添加以下代码

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

效果预览：

在这里插入图片描述

素调 - 方式二：CSDN方式，也在html标签加入。

html {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

备用：

<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}
</style>

效果预览：

在这里插入图片描述

素调 - 方式三：腾讯。定义全局样式，在body上引入样式：

.garyBody {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}