估計大家發(fā)現(xiàn)了，最近天，各大網(wǎng)站、APP的頁面都變灰了，原因想必大家都知道了。

頁面變灰

?大家可以看到很多網(wǎng)站包括主頁和內(nèi)容也都已經(jīng)變成了灰色，比如百度、B 站、CSDN 等等。

?

?這時候我們可能會好奇這是怎么做到的呢？

探究

我們選擇一個網(wǎng)站，比如360導(dǎo)航。

用的這個 CSS 樣式，其內(nèi)容為：

html?{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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

}

因為這個樣式起作用了，而且還是全局的效果，因為它是作用在html的節(jié)點之上的，所以整個網(wǎng)頁變灰了。

同樣的CSDN也一樣的

CSDN 的寫法：

（如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，推薦使用下面代碼，

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

.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);}

B站

百度是包裝成了一個class：big-event-gray（原理相同）

功能實現(xiàn)

最終我們發(fā)現(xiàn)filter: grayscale 使用可以調(diào)整元素的灰度值

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

filter（可以打開查看嘗試）

總結(jié)

這里簡單總結(jié)說明一下今天get到的知識吧！

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

灰色頁面，這里其實就是設(shè)置了 grayscale，其用法如下：

?

filter: grayscale(percent)

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

如：

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

都可以將節(jié)點轉(zhuǎn)化為 100% 的灰度模式。

大家也可以點開上面的官方鏈接查看 ，試試新get的技巧吧！

總結(jié)

以上是生活随笔為你收集整理的网站变灰是怎么样实现的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。