css实现整个网站变成灰色的效果

我们发现许多主要网络平台的界面都变成了灰色调，以示哀悼。这包括了百度、B站、爱奇艺、CSDN、微信支付图标以及QQ头像等。在纪念和悼念重要人物或英雄的日子，将网站页面调整为黑白或灰色已成为一种表达哀思和敬意的方式。

当我们浏览网站时，偶尔会发现网站的整体风格突然变为灰色，包括各种按钮和图片。这种变化可能会引起我们的好奇：如何快速且高效地实现这样的效果呢？这些方法主要是通过添加特定的CSS代码到网页中来实现的。

<style type="text/css">
html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>

<style>
 html {
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 -webkit-filter: grayscale(100%);
}
</style>

方法3：

<style>
html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    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)
}
</style>