2020 年 4 月 4 日勘纯，星期六局服，清明節(jié)。
我們的國家經(jīng)歷了非常慘痛的時(shí)刻驳遵，很多英雄在救助他人的路上倒下腌逢，更有很多烈士英雄保衛(wèi)人民的安危遇難，今天全國下降半旗超埋，北京時(shí)間 10 點(diǎn)全國默哀三分鐘搏讶，來致敬英雄們。同時(shí)今天一切公共娛樂活動(dòng)也都會停止霍殴，包括直播媒惕、綜藝、影視来庭、游戲等等妒蔚。
我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達(dá)深切的哀悼，向所有在抗戰(zhàn)在疫情前線的工作和醫(yī)護(hù)人員致敬月弛。我們每一個(gè)人的平安面前肴盏，都是英雄的人墻。
網(wǎng)站變灰
今天大家可以看到很多很多網(wǎng)站包括主頁和內(nèi)容也都已經(jīng)變成了灰色帽衙，比如百度菜皂、B 站、愛奇藝厉萝、CSDN 等等恍飘。
大家可以看到全站的內(nèi)容都變成灰色了，包括按鈕谴垫、圖片等等章母。這時(shí)候我們可能會好奇這是怎么做到的呢？
有人會以為所有的內(nèi)容都統(tǒng)一換了一個(gè) CSS 樣式翩剪，圖片也全換成灰色的了乳怎，按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個(gè)成本也太高了前弯，而且萬一某個(gè)控件忘記加灰色樣式了豈不是太突兀了蚪缀。
其實(shí)焦辅，解決方案很簡單，只需要幾行代碼就能搞定了椿胯。
實(shí)現(xiàn)
我們選擇一個(gè)網(wǎng)站，比如 B 站吧剃根，打開瀏覽器開發(fā)者工具哩盲。
審查一下網(wǎng)頁的源代碼，我們可以發(fā)現(xiàn)在 html 的這個(gè)地方多了一個(gè)疑似的 class狈醉，叫做 gray廉油，gray 中文即灰色。
可以看到苗傅，我們只要將下面這行 CSS 樣式抒线，加入到頁面指定節(jié)點(diǎn)，即可實(shí)現(xiàn)網(wǎng)頁變灰的效果：
-webkit-filter: grayscale(.95);
其完整內(nèi)容為：
html.gray {
-webkit-filter: grayscale(.95);
}
我們將其取消渣慕，就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來了嘶炭。
果然是這個(gè)樣式在起作用，而且是全局的效果逊桦，因?yàn)樗亲饔迷诹?html 這個(gè)節(jié)點(diǎn)之上的眨猎。
另外看看 CSDN，它也是用的這個(gè) CSS 樣式强经，其內(nèi)容為：
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);
}
這個(gè)實(shí)現(xiàn)看起來兼容性會更好一些睡陪。
因此我們可以確定，通過一個(gè)全局的 CSS 樣式就能將整個(gè)網(wǎng)站變成灰色效果匿情。
分析
那么這里我們就來詳細(xì)了解一下這究竟是一個(gè)什么樣的 CSS 樣式兰迫。
這個(gè)樣式名叫做 filter，搜下 MDN 的官方介紹炬称，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter汁果。
官方介紹內(nèi)容如下：
filter CSS 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像玲躯，背景和邊框的渲染须鼎。
CSS 標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)。你也可以參考一個(gè) SVG 濾鏡府蔗，通過一個(gè) URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])晋控。
其實(shí)就是一個(gè)濾鏡的意思。
官方有一個(gè) 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;
各個(gè)用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
比如這里如果我們可以使用 blur 設(shè)置高斯模糊只洒，用法如下：
filter: blur(radius)
給圖像設(shè)置高斯模糊许帐。radius 一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起毕谴，所以值越大越模糊成畦；如果沒有設(shè)定值，則默認(rèn)是 0涝开；這個(gè)參數(shù)可設(shè)置絕對像素值循帐，但不接受百分比值。
可以達(dá)成這樣的效果：
再說回剛才的灰色圖像舀武，這里其實(shí)就是設(shè)置了 grayscale拄养，其用法如下：
filter: grayscale(percent)
將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例银舱。percent 值為 100% 則完全轉(zhuǎn)為灰度圖像瘪匿，值為 0% 圖像無變化。值在 0% 到 100% 之間寻馏，則是效果的線性乘子柿顶。若未設(shè)置，值默認(rèn)是 0操软。另外除了傳遞百分比嘁锯，還可以傳遞浮點(diǎn)數(shù)，效果是一樣的聂薪。
如：
filter: grayscale(1)
filter: grayscale(100%)
都可以將節(jié)點(diǎn)轉(zhuǎn)化為 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);
}
這樣想要變灰的節(jié)點(diǎn)只需要加上 gray 這個(gè) class 就好了，比如加到 html 節(jié)點(diǎn)上就可以全站變灰了翔悠。
最后呢业崖，看一下瀏覽器對 filter 這個(gè)樣式的兼容性怎樣，如圖所示：
這里我們看到蓄愁，這里除了 IE双炕，其他的 PC、手機(jī)端的瀏覽器都支持了撮抓，F(xiàn)irefox 的 PC妇斤、安卓端還單獨(dú)對 SVG 圖像加了支持，可以放心使用。
總結(jié)
本篇文章簡單介紹了一下今天觀察到的網(wǎng)站變灰的實(shí)現(xiàn)站超，也學(xué)習(xí)了 filter 的更詳細(xì)的用法荸恕，希望有幫助。
