原文連結
網站變灰主要是給其新增css屬性filter: grayscale(100%)，但是這種做法存在著相容性問題，並不是所有的瀏覽器都支援

//新增對應的瀏覽器字首
.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
 

示例：

filter的幾個屬性

blur():模糊

blur() 函式將高斯模糊應用於輸入影象。radius 定義了高斯函式的標準偏差值，或者螢幕上有多少畫素相互融合，因此，較大的值將產生更多的模糊。若沒有設定值，預設為 0。該引數可以指定為 CSS 長度，但不接受百分比值。

brightness()：亮度

brightness() 函式將線性乘法器應用於輸入影象，使其看起來或多或少地變得明亮。值為 0% 將建立全黑影象。值為 100% 會使輸入保持不變。其他值是效果的線性乘數。如果值大於 100% 提供更明亮的結果。若沒有設定值，預設為 1。

contrast()：對比度

contrast() 函式可調整輸入影象的對比度。值是 0% 的話，影象會全黑。值是 100%，影象不變。值可以超過 100%，意味著會運用更低的對比。若沒有設定值，預設是 1。

opacity()：透明度

opacity() 函式將透明效果應用於影象。它接受百分比或小數值來決定應用於影象的透明度。0% 或 0 的不透明度將產生完全透明的元素。100% 不透明度將顯示不透明。將不透明度設定在 0% 和 100% 之間將使元素或影象部分透明。

23.cnblogs.com/blog/2084543/202212/2084543-20221206215112134-342740939.png)

sepia() ：棕褐色

sepia() 函式可以為影象新增柔和的褐色色調，使影象看起來更溫暖、更復古。它類似於使用灰度濾鏡，但色調為褐色。它接受 0 到 1 之間的小數值，或最大為 100% 的百分比值。值為 0 會使影象保持不變。值為 100% 或 1 會將影象完全變為棕褐色，而介於 0% 和 100% 之間的值會使影象的色調介於其原始顏色和完全棕褐色之間。

drop-shadow()：陰影

drop-shadow() 函式用於增加影象的陰影，和 box-shadow 的作用類似，使影象看起來更加立體。

drop-shadow() 函式接受四個引數：
引數使用類似於box-shadow的幾個引數
<offset-x>：長度值，指定元素和投影之間的水平距離。正值將陰影置於元素右側，負值將陰影置於左側。
<offset-y>：長度值，指定元素和投影之間的垂直距離。正值將陰影置於元素下方，負值將陰影置於其上方。
<blur-radius>: 陰影的模糊半徑指定為 CSS 長度單位。值越大，陰影變得越模糊。如果未指定，則預設為 0，產生清晰且不模糊的陰影。不允許使用負值。
<color>陰影的顏色。如果未指定，則預設為黑色。

saturate()：飽和度

saturate() 函式用於改變元素中顏色的飽和度。飽和元素的顏色比較鮮豔；對於曝光不足的影象可以增加飽和度，反之亦然。飽和度可以用百分比表示，0% 表示完全不飽和，100% 表示與原影象一樣。

複合寫法

filter 屬性支援設定多個濾鏡

.box {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}