css实现整个网站变成灰色的效果[朗读]

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

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