文章目录
- 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下挺占资源。
