If you want the entire webpage to be grayed out, how should you write it? Do you need to modify every element? This is still too cumbersome. A property filter is provided in CSS3
filter applies graphical effects such as blurring or color shifting to elements. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
So if you want the whole webpage to be grayed out, just add the following styles to the 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>