将页面变为黑白色纯CSS实现当有重大事件发生，需要表示哀悼时，网站有一个需求就是将页面变为黑白色，纯CSS方法实现，将H

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转化成黑白案例</title>
    <style>
        .conntainer {
          display: flex;
          flex-direction: column;
        }
        html {
          filter: grayscale(100%);
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          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);
          -webkit-filter: grayscale(1);
        }
        button {
          color: red;
        }
    </style>
</head>

<body>
    <div class="conntainer">
        <button>按钮颜色</button>
        <img src="./dog.jpg" alt="">
    </div>
</body>

</html>