今天是2020年4月4日，星期六，清明節(jié)。

我們的國(guó)家經(jīng)歷了一個(gè)非常痛苦的時(shí)刻。許多英雄在幫助他人的路上倒下了，許多烈士和英雄為捍衛(wèi)人民的安全而犧牲了。今天，降半旗。北京時(shí)間10點(diǎn)，全國(guó)默哀三分鐘，向英雄們致敬。與此同時(shí)，所有公共娛樂活動(dòng)今天都將停止，包括直播、綜藝、影視、游戲等。

在此，我也向全國(guó)抗擊新冠肺炎肺炎疫情的烈士和死難同胞表示深切哀悼，向所有在抗日前線工作的工人和醫(yī)務(wù)人員致敬。在我們的和平面前，我們每一個(gè)人都是英雄的人墻。

網(wǎng)站灰顯

今天，你可以看到很多網(wǎng)站，包括主頁(yè)和內(nèi)容，都變成了灰色，比如百度、b站、愛奇藝、CSDN等等。

程序員

愛奇藝

百度(全球最大的中文搜索引擎)

可以看到整個(gè)站的內(nèi)容都變成了灰色，包括按鈕，圖片等等。此時(shí)，我們可能想知道這是如何做到的。

有人認(rèn)為所有的內(nèi)容都變成了一個(gè)CSS樣式，圖片都變成了灰色，按鈕等樣式也變成了灰色樣式。但是你想想，成本太高了，一個(gè)控件忘了加灰風(fēng)格豈不是太突兀？

其實(shí)解決方法很簡(jiǎn)單，只需要幾行代碼。

認(rèn)識(shí)

我們選一個(gè)網(wǎng)站，比如b站，打開瀏覽器開發(fā)者工具。

檢查網(wǎng)頁(yè)的源代碼，可以發(fā)現(xiàn)html的這個(gè)地方有一個(gè)疑似類，叫g(shù)ray，中文意思是gray。

灰色效應(yīng)

它的CSS內(nèi)容是:

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

如果取消，我們會(huì)發(fā)現(xiàn)網(wǎng)站的顏色可以重新恢復(fù)。

恢復(fù)效果

果然，這種風(fēng)格起作用了，而且是全局效果，因?yàn)樗饔迷趆tml節(jié)點(diǎn)上。

此外，看看CSDN，它也使用這種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)站變成一個(gè)灰色的效果。

分析

所以我們來詳細(xì)了解一下這是一種什么樣的CSS樣式。

這種風(fēng)格叫做濾鏡。搜索MDN的官方介紹，其鏈接是:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter.

官方介紹如下:

濾鏡CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。

CSS標(biāo)準(zhǔn)包含一些已經(jīng)達(dá)到預(yù)定義效果的函數(shù)。您也可以引用一個(gè)SVG過濾器，并通過URL鏈接到SVG過濾器元素(SVG過濾器元素[1])。

其實(shí)就是一個(gè)濾鏡的意思。

官方有一個(gè)Demo，可以看到效果，如圖。

演示

比如這里，圖片、顏色、模糊、對(duì)比度等信息是通過濾鏡樣式改變的。

所有使用示例如下:

/* URL to SVG filter */ filter:url("filters.svg#filter-id");

/* & lt；過濾器-功能>;values */filter:blur(5px)；濾鏡:亮度(0.4)；濾鏡:對(duì)比度(200%)；濾鏡:投影(16px 16 px 20 pxblue)；濾鏡:灰度(50%)；濾鏡:色調(diào)旋轉(zhuǎn)(90度)；過濾器:倒置(75%)；濾鏡:不透明度(25%)；過濾器:飽和(30%)；過濾器:棕褐色(60%)；

/*多重濾鏡*/濾鏡:對(duì)比度(175%)亮度(3%)；

/*全局值*/篩選器:繼承；filter:initial；過濾器:取消設(shè)置；

對(duì)于每個(gè)用法介紹，你可以參考官方文件:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

例如，如果我們可以在這里使用模糊來設(shè)置高斯模糊，用法如下:

filter:blur(radius)

為圖像設(shè)置高斯模糊。一個(gè)半徑的值設(shè)置高斯函數(shù)的標(biāo)準(zhǔn)差，或者說屏幕上融合了多少像素，所以值越大越模糊；如果沒有設(shè)定值，默認(rèn)值為0；此參數(shù)可以設(shè)置絕對(duì)像素值，但不接受百分比值。

這種效果可以實(shí)現(xiàn):

影響

回到剛才的灰度圖像，這里其實(shí)是設(shè)置了灰度的，其用法如下:

filter:grayscale(percent)

將圖像轉(zhuǎn)換為灰度圖像。該值定義了轉(zhuǎn)換的比例。如果百分比值為100%，則完全轉(zhuǎn)換為灰度圖像，如果值為0%，則圖像不變。0%到100%之間的值是效果的線性乘數(shù)。如果未設(shè)置，默認(rèn)值為0。除了傳遞百分比，還可以傳遞浮點(diǎn)數(shù)，效果一樣。

例如:

filter:grayscale(1)filter:grayscale(100%)

所有節(jié)點(diǎn)都可以轉(zhuǎn)換成100%灰度模式。

所以這里一切都清楚了。如果要把整個(gè)站變成灰色，考慮每個(gè)瀏覽器的兼容寫法，可以參考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)只需要添加類灰即可。例如，如果它們被添加到html節(jié)點(diǎn)，整個(gè)站可以變灰。

最后，看看瀏覽器與過濾器樣式的兼容性，如圖所示:

和睦相處

這里可以看到除了IE，PC和手機(jī)上的其他瀏覽器都支持，F(xiàn)irefox的PC和Android也分別支持SVG圖像，可以放心使用。

總結(jié)

本文簡(jiǎn)要介紹了今天觀察到的網(wǎng)站灰度化的實(shí)現(xiàn)，并學(xué)習(xí)了過濾器的更詳細(xì)的用法，希望有所幫助。

引用

[1] SVG過濾元素:https://developer . Mozilla . org/en-US/docs/Web/SVG/Element/filter

見證歷史！1071萬(wàn)考生高考延期30天意味著什么？