如果想要整个网页变成灰色应该怎么写呢，难道要每个元素都去修改吗，这样还是太繁琐了。CSS3中提供了一个属性 filter
filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
所以想要整个网页变为灰色，只需要给body添加如下样式即可
<!DOCTYPE html>
<html>
<head>
<title>网页设为灰色模式</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter:grayscale(1);
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}
div {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div style="background-color: pink">这是粉色DIV</div>
<div style="background-color: skyblue">这是蓝色DIV</div>
<div style="background-color: purple">这是紫色DIV</div>
</body>
</html>