月4日凌晨零點起，騰訊游戲官方發布將把騰訊旗下所有娛樂游戲停服一天，以警示玩家深記抗疫戰士的偉大付出和抗疫歷史。

為了哀悼英雄們，不僅游戲被官方停服，新聞資訊的所有界面都被黑白色取代，我們為死難者哀悼時候，都會把網站調到灰色，如何快速實現呢，以下介紹兩種方法（切圖網用的第一種）

方法一 ：

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

方法二：

在引人的頁面導入grayscale.js文件,例如

<script type="text/javascript" src="js/grayscale.js"></script>

然后

<script type="text/javascript">
window.onload = function(){
grayscale(document.html);
}
</script>

grayscale.js下載地址

https://gitee.com/qietuwang/codes/u08qiecfk3s5ngjxwzr9p12

本人在IETester工具下，測試IE7/8/9均支持，IE6不支持,XP系統真實IE6環境下沒測試過！

采用webkit的Chrome支持（需要Chrome 18.0.976版本以上），其他采用webkit引擎的瀏覽器沒測試過，只要采用最新webkit nightly版本均支持

.4日清明節大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色，比如百度、掘金、思否、CSDN 等等。

思否

CSDN

大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？

有人會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。

其實，解決方案很簡單，只需要幾行代碼就能搞定了。

實現

我們選擇一個網站，比如 頭條，打開瀏覽器開發者工具。

變灰效果

審查一下網頁的源代碼，選中html，然后我們只要將下面這行 CSS 樣式，加入到頁面指定節點，即可實現網頁變灰的效果：

html {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

}

-webkit-filter: grayscale(.95);我們將其取消，就能發現網站的顏色就能重新還原回來了。還原效果

還原效果

果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節點之上的。

因此我們可以確定，通過一個全局的 CSS 樣式就能將整個網站變成灰色效果。

分析

那么這里我們就來詳細了解一下這究竟是一個什么樣的 CSS 樣式。

這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。

官方介紹內容如下：

filter CSS 屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像，背景和邊框的渲染。

CSS 標準里包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。

其實就是一個濾鏡的意思。

官方有一個 Demo，可以看下效果，如圖所示。

Demo

比如這里通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。

其所有用法示例如下：

/* URL to SVG filter */

filter: url("filters.svg#filter-id");

/* <filter-function> values */

filter: blur(5px);

filter: brightness(0.4);

filter: contrast(200%);

filter: drop-shadow(16px 16px 20px blue);

filter: grayscale(50%);

filter: hue-rotate(90deg);

filter: invert(75%);

filter: opacity(25%);

filter: saturate(30%);

filter: sepia(60%);

/* Multiple filters */

filter: contrast(175%) brightness(3%);

/* Global values */

filter: inherit;

filter: initial;

filter: unset;

各個用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

比如這里如果我們可以使用 blur 設置高斯模糊，用法如下：

• filter: grayscale(percent)

給圖像設置高斯模糊。radius 一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設定值，則默認是 0；這個參數可設置絕對像素值，但不接受百分比值。

可以達成這樣的效果：

效果

再說回剛才的灰色圖像，這里其實就是設置了 grayscale，其用法如下：

filter: grayscale(percent)

filter: grayscale(percent)

將圖像轉換為灰度圖像。值定義轉換的比例。percent 值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數，效果是一樣的。

如：

filter: grayscale(1)

filter: grayscale(100%)

都可以將節點轉化為 100% 的灰度模式。

所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：

.gray {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

}

這樣想要變灰的節點只需要加上 gray 這個 class 就好了，比如加到 html 節點上就可以全站變灰了。

最后呢，看一下瀏覽器對 filter 這個樣式的兼容性怎樣，如圖所示：

兼容性

這里我們看到，這里除了 IE，其他的 PC、手機端的瀏覽器都支持了，Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持，可以放心使用。

紹：

這是一款來自國外的分頁樣式，主要以灰色為主，紅色為輔。經測試，兼容所有瀏覽器，但 IE6 png 背景圖片未處理，請自行處理。如果喜歡這款分頁就拿去使用吧。

演示地址：

https://www.361zy.com/demo/520/

下載地址：

https://cloud.06dn.com/s/RWZC3

解壓碼：

WpUiD9SO