如何让HTML网页编程素调

JaneYork

发布于 2023-10-11 14:52:43

1450

发布于 2023-10-11 14:52:43

文章被收录于专栏：PUSDN平行宇宙软件开发者网PUSDN平行宇宙软件开发者网

title: 如何网页变成灰色素调 date: 2020-04-04 23:31:42 tags: [Hexo,建站] categories: [建站]

先来看几个效果图

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);
}

效果预览：