如何使用css實現網站變灰效果

爲了悼念新冠病毒犧牲的烈士，很多網站都在清明節那天把網站設置成了灰色。

示例

我選擇了幾個網站，先來看看它們是如何實現網站變灰效果的。

B站

html.gray {
    -webkit-filter: grayscale(.95);
}

百度網盤

body {
    filter: grayscale(100%);
}

百度

body.qm-activity #head_wrapper, body.qm-activity #s_menu_gurd, body.qm-activity #u1, body.qm-activity #u_sp, body.qm-activity .s-ctner-menus .s-menu-item-underline, body.qm-activity .s-news-rank-content, body.qm-activity .s-news-wrapper .s-news-list-wrapper .hot-point, body.qm-activity .s-news-wrapper .s-news-list-wrapper:nth-child(-n+3) img.s-news-img, body.qm-activity .s-top-left.s-isindex-wrap {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

360官網

html {
    filter: progid:DXImageTransForm.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: saturate(0);
}

掘金

html.mourning {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: #808080;
}

網易官網

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

淘寶

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

網易雲音樂

html {
    filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale);
    -webkit-filter: grayscale(1);
}

代碼分析

綜合以上各個示例，可以發現它們的實現網站變灰效果的代碼都是通過filter屬性實現的，不過有一些代碼會加上一些瀏覽器的私有屬性進行兼容，比如-webkit等。

在這些示例中，filter屬性的賦值大致有兩種（url和顏色除外）：grayscale和saturate。

grayscale

對圖片進行灰度轉換, 它是 <filter-function> 的子屬性。

語法

grayscale(amount)

參數

mount：轉換值的大小, 可以是<number> 或 <percentage>. 當值爲100%時, 灰度最大. 0%時與原圖沒有區別. 0% 到 100% 之間的值會使灰度線性變化. amount 爲空時會自動插入0.

saturate

該CSS功能是使輸入圖像超飽和或去飽和。

語法

saturate(amount)

參數

amount：轉換量，指定爲<number>或<percentage>。值100%過低會使圖像去飽和，而值過高則會使圖像100%飽和。值0%完全不飽和，而值100%保持輸入不變。內插的lacuna值爲1。

在這些代碼裏面，有一項對filter的賦值比較特殊：progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);，一眼看上去會感覺這個屬性值的特別奇怪，在grayscale的外層包裹着一大串對象，其實這個屬性值是爲了兼容IE瀏覽器。

總結

一般使用css的filter屬性使網站變色。但是css濾鏡是比較消耗瀏覽器性能的，所以在非必要的情況下，不要使用css濾鏡。

另外，大部分網站都是將filter屬性掛載到了html標籤上，但是百度卻掛載到了body標籤上。根據過往經驗判斷，在當前使用場景下，還是更推薦將filter屬性掛載到html標籤上。

參考

filter - CSS（層疊樣式表） | MDN