最近，不少同學(xué)發(fā)現(xiàn)各大網(wǎng)站、APP等主頁(yè)面都變灰了，于是就想知道這個(gè)技術(shù)是如何實(shí)現(xiàn)的呢？

有的覺(jué)得這是各大網(wǎng)站和APP在開發(fā)時(shí)就已經(jīng)提前準(zhǔn)備了這套方案，也有的說(shuō)是使用的濾鏡，那究竟哪個(gè)是正確的呢？不妨讓小薈帶大家深入剖析一下其中的技術(shù)吧！

???網(wǎng)站變灰

大家可以看到眾多政府、高校、企業(yè)網(wǎng)站包括主頁(yè)和內(nèi)容也都已經(jīng)變成了灰色。

這種使得包括按鈕、圖片等全站內(nèi)容都變成灰色到底是如何做到的呢？

很簡(jiǎn)單，只需要幾行代碼就能搞定了。

???實(shí)現(xiàn)

我們以一個(gè)常用的網(wǎng)站為例：

打開瀏覽器開發(fā)者工具，審查網(wǎng)頁(yè)的源代碼，我們可以發(fā)現(xiàn)在 html 的這個(gè)地方多了一個(gè)class，這個(gè)class叫做 gray，也就是灰色。

其 CSS 內(nèi)容為：

現(xiàn)在小薈將其取消，我們就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來(lái)了。

果然是這個(gè)樣式在起作用，由于它是作用在了 html 這個(gè)節(jié)點(diǎn)之上的，所以起到全局的效果。因此我們可以確定，通過(guò)一個(gè)全局的 CSS 樣式就能將整個(gè)網(wǎng)站變成灰色效果。

???分析

那么這里我們就來(lái)詳細(xì)了解一下這究竟是一個(gè)什么樣的 CSS 樣式。

這個(gè)樣式名叫做 filter，官方介紹內(nèi)容如下：

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

CSS 標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)。你也可以參考一個(gè) SVG 濾鏡，通過(guò)一個(gè) URL 鏈接到 SVG 濾鏡元素 (SVG filter element)。

其實(shí)也就是一個(gè)濾鏡，為方便用戶理解，官方有一個(gè) Demo，效果如下：

這里通過(guò) filter 樣式改變了圖片、顏色、模糊、對(duì)比度等等信息。

其所有用法示例如下：

具體用法大家可以參考官方的文檔說(shuō)明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

對(duì)于我們之前所講的變灰，這里其實(shí)就是設(shè)置了 grayscale，其用法如下：

它將圖像轉(zhuǎn)換為灰度圖像，值定義轉(zhuǎn)換的比例。

當(dāng)percent 值為 100% ，則完全轉(zhuǎn)為灰度圖像；值為 0% ，則圖像無(wú)變化；值在 0% 到 100% 之間，則是效果的線性乘子；若未設(shè)置，值默認(rèn)是 0。

另外除了傳遞百分比，還可以傳遞浮點(diǎn)數(shù)，效果是一樣的，都可以將節(jié)點(diǎn)轉(zhuǎn)化為 100% 的灰度模式。

現(xiàn)在，大家應(yīng)該都清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考這種的寫法：

如果我們想要設(shè)置變灰色，那只需加上 gray 這個(gè) class 就好了，如果加在 html 節(jié)點(diǎn)上，就可以實(shí)現(xiàn)全站變灰了。

感謝小伙伴的耐心觀看，如果看懂了希望一鍵三連支持一下小薈哦！