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>