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

頁(yè)面變灰

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

?

?這時(shí)候我們可能會(huì)好奇這是怎么做到的呢？

探究

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

用的這個(gè) 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);

}

因?yàn)檫@個(gè)樣式起作用了，而且還是全局的效果，因?yàn)樗亲饔迷趆tml的節(jié)點(diǎn)之上的，所以整個(gè)網(wǎng)頁(yè)變灰了。

同樣的CSDN也一樣的

CSDN 的寫法：

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

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

.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站

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

功能實(shí)現(xiàn)

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

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

filter（可以打開查看嘗試）

總結(jié)

這里簡(jiǎn)單總結(jié)說(shuō)明一下今天get到的知識(shí)吧！

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

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

?

filter: grayscale(percent)

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

如：

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

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

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

總結(jié)

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

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