4月4日時，很多網(wǎng)站包括主頁和內(nèi)容（包括圖片、按鈕等）也都已經(jīng)變成了灰色。當天我打開的csdn、人人視頻都全部變?yōu)榱嘶疑?/p>

我當時第一想法是難道把這些圖片都換了一遍嗎？？？但是成本未免太高，且可能會有疏漏。今天在公眾號里看到了一篇推文的詳細解釋，記錄一下。

---

一、實際的解決方法：（僅對于網(wǎng)站）

加一個全局的CSS樣式。加在最外層的html上。

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

---

二、什么是Filter — 濾鏡？

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

通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。

灰色圖像，這里其實就是設置了 grayscale，其用法如下：

filter: grayscale(percent)

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

如：

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

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

所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以考慮如下寫法：

.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é)點只需要加上 gray 這個 class 就好了，比如加到 html 節(jié)點上就可以全站變灰了。

---

三、各瀏覽器對filter的兼容性

除了 IE，其他的 PC、手機端的瀏覽器都支持了，Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持。

---

四、APP中是怎么實現(xiàn)的？

摘自：公眾號下方的留言

有些資源是從Web接口獲得的，比如banner，縮略圖，小圖標等。如微博。

某些顏色或者樣式配置也是從接口獲得的，是可配置的。

一些APP內(nèi)嵌的Web頁面，和網(wǎng)頁原理是一樣的。

---

參考文章：今天網(wǎng)站都變成灰色了，這其中是怎么實現(xiàn)的？

總結(jié)

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

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