4月4日時,很多網站包括主頁和內容(包括圖片、按鈕等)也都已經變成了灰色。當天我打開的csdn、人人視頻都全部變爲了灰色。
我當時第一想法是難道把這些圖片都換了一遍嗎???但是成本未免太高,且可能會有疏漏。今天在公衆號裏看到了一篇推文的詳細解釋,記錄一下。
一、實際的解決方法:(僅對於網站)
加一個全局的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 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像,背景和邊框的渲染。
- 通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
- 灰色圖像,這裏其實就是設置了 grayscale,其用法如下:
filter: grayscale(percent)
將圖像轉換爲灰度圖像。值定義轉換的比例。percent 值爲 100% 則完全轉爲灰度圖像,值爲 0% 圖像無變化。值在 0% 到 100% 之間,則是效果的線性乘子。若未設置,值默認是 0。另外除了傳遞百分比,還可以傳遞浮點數,效果是一樣的。
如:
filter: grayscale(1)
filter: grayscale(100%)
都可以將節點轉化爲 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);
}
這樣想要變灰的節點只需要加上 gray 這個 class 就好了,比如加到 html 節點上就可以全站變灰了。
三、各瀏覽器對filter的兼容性
除了 IE,其他的 PC、手機端的瀏覽器都支持了,Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持。
四、APP中是怎麼實現的?
摘自:公衆號下方的留言
- 有些資源是從Web接口獲得的,比如banner,縮略圖,小圖標等。如微博。
- 某些顏色或者樣式配置也是從接口獲得的,是可配置的。
- 一些APP內嵌的Web頁面,和網頁原理是一樣的。