文章目录
- 1. 文章引言
- 2. 实现方法
- 2.1 修改CSS文件
- 2.2 修改html标签
- 2.3 修改body标签
- 2.4 使用grayscale.js插件
1. 文章引言
有段时间，我们打开知名的网页，发现全部变成黑白色了，如下图所示：
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。
首先，我需要创建test.html文件(网页)，如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试网页黑白色</title><style type="text/css">div {width: 200px;height: 200px;border: 1px red solid;background-color: blue}p {color: red;font-size: 30px}</style>
</head>
<body><div></div><p> 相信未来更美好</p>
</body>
</html>
效果如下所示：
2. 实现方法
我们可以通过如下方法，来实现test.html网页的黑白色。
2.1 修改CSS文件
我们可以在网页中加入如下代码：
<style type="text/css">html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}div {width: 200px;height: 200px;border: 1px red solid;background-color: blue}p {color: red;font-size: 30px}
</style>
2.2 修改html标签
修改<html>标签，加入内联样式
<!DOCTYPE html>
<html lang="en" style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
......
</html>
2.3 修改body标签
给body标签加样式
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- */ /* 但是这行代码是为了兼容IE, 虽然一行代码很少, 但是效果并不好, 而且网页比较卡, 不推荐使用[即删除,], 同时发现, csdn, 京东, 淘宝也都没有兼容IE11浏览器 */
}
2.4 使用grayscale.js插件
这个插件是模拟IE的filter:progid方法，支持IE、Safari、Chrome、Opera、Firefox等浏览器。
grayscale.js插件源文件：http://cn.baiwanzhan.com/js/gray_baiwanzhan.js
使用方法如下：
window.οnlοad=function(){grayscale(document.body);
}
但这个在IE下挺占资源。
本文链接:https://www.ngui.cc/article/show-738708.html
