如何用一行代碼實現(xiàn)網(wǎng)頁變灰效果?
點擊上方Python知識圈，選擇設為星標
回復1024獲取Python資料
閱讀文本大概需要 6?分鐘
點擊「閱讀原文」查看pk哥原創(chuàng)精品視頻。
昨天是 2020 年 4 月 4 日，星期六，清明節(jié)。
我們的國家經(jīng)歷了非常慘痛的時刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保衛(wèi)人民的安危遇難，昨天全國下降半旗，北京時間 10 點全國默哀三分鐘，來致敬英雄們。同時昨天一切公共娛樂活動也都會停止，包括直播、綜藝、影視、游戲等等。
我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼，向所有在抗戰(zhàn)在疫情前線的工作和醫(yī)護人員致敬。我們每一個人的平安面前，都是英雄的人墻。
網(wǎng)站變灰
昨天大家可以看到很多很多網(wǎng)站包括主頁和內容也都已經(jīng)變成了灰色，比如百度、B 站、愛奇藝、CSDN 等等。
CSDN
愛奇藝
百度大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？
有人會以為所有的內容都統(tǒng)一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。
其實，解決方案很簡單，只需要幾行代碼就能搞定了。
實現(xiàn)
我們選擇一個網(wǎng)站，比如 B 站吧，打開瀏覽器開發(fā)者工具。
審查一下網(wǎng)頁的源代碼，我們可以發(fā)現(xiàn)在 html 的這個地方多了一個疑似的 class，叫做 gray，gray 中文即灰色。
變灰效果可以看到，我們只要將下面這行 CSS 樣式，加入到頁面指定節(jié)點，即可實現(xiàn)網(wǎng)頁變灰的效果：
-webkit-filter:?grayscale(.95);其完整內容為：
html.gray {-webkit-filter: grayscale(.95);}
我們將其取消，就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來了。
還原效果果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節(jié)點之上的。
另外看看 CSDN，它也是用的這個 CSS 樣式，其內容為：
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);}
這個實現(xiàn)看起來兼容性會更好一些。
因此我們可以確定，通過一個全局的 CSS 樣式就能將整個網(wǎng)站變成灰色效果。
分析
那么這里我們就來詳細了解一下這究竟是一個什么樣的 CSS 樣式。
這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。
官方介紹內容如下：
filter?CSS 屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像，背景和邊框的渲染。CSS 標準里包含了一些已實現(xiàn)預定義效果的函數(shù)。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。
其實就是一個濾鏡的意思。
官方有一個 Demo，可以看下效果，如圖所示。
Demo比如這里通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
其所有用法示例如下：
/* URL to SVG filter */filter: url("filters.svg#filter-id");/*values */ filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);/* Multiple filters */filter: contrast(175%) brightness(3%);/* Global values */filter: inherit;filter: initial;filter: unset;
各個用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
比如這里如果我們可以使用 blur 設置高斯模糊，用法如下：
filter: blur(radius)給圖像設置高斯模糊。radius 一值設定高斯函數(shù)的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設定值，則默認是 0；這個參數(shù)可設置絕對像素值，但不接受百分比值。
可以達成這樣的效果：
效果再說回剛才的灰色圖像，這里其實就是設置了 grayscale，其用法如下：
filter: grayscale(percent)將圖像轉換為灰度圖像。值定義轉換的比例。percent 值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數(shù)，效果是一樣的。
如：
filter: grayscale(1)filter: grayscale(100%)
都可以將節(jié)點轉化為 100% 的灰度模式。
所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：
.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、手機端的瀏覽器都支持了，F(xiàn)irefox 的 PC、安卓端還單獨對 SVG 圖像加了支持，可以放心使用。
總結
本篇文章簡單介紹了一下昨天觀察到的網(wǎng)站變灰的實現(xiàn)，也學習了 filter 的更詳細的用法，希望有幫助。
References
[1]?SVG filter element:?https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
“如果有后人來撰寫今天的歷史，那他們將發(fā)現(xiàn)沒有任何文字詞藻能夠寫盡這場災難的殘酷，也沒有任何語言修辭能描述人類為生存所付出的艱苦卓絕的努力。
我們將懷揣火種走過黑暗長夜，跨過戰(zhàn)友的遺骸，踏過荊棘和深淵，最終在累累尸骨上重新點燃種族延續(xù)的火炬。
我知道你們并不需要歷史來記載功勛，也無謂那些空虛華美的稱頌。
只要山川河流、千萬英靈，見證過我們前仆后繼的跋涉和永不放棄的努力。”??—— 敬平凡的人類
公眾號：Python知識圈（ID：PythonCircle）博客：www.pyzhishiquan.com知乎：Python知識圈微信視頻號：菜鳥程序員 （分享有趣的編程技巧、Python技巧）bilibili：菜鳥程序員的日常（目前原創(chuàng)視頻：10，累計播放量：15萬）
一個學習Python的人，喜歡分享，喜歡搞事情！長按下圖二維碼關注，和你一起領悟Python的魅力。
留言打卡 DAY 44
今日的留言話題是：隨意發(fā)揮。關于留言打卡的規(guī)則參考：留言打卡第二季? (點擊鏈接查看規(guī)則)，請按照?昵稱+天數(shù)（請以自己實際打卡的天數(shù)為準，如day1 or day2 or day3）+?留言內容（不少于15字）的方式留言。
Python知識圈公眾號的交流群已經(jīng)建立，群里可以領取 Python 和人工智能學習資料，大家可以一起學習交流，效率更高，如果是想發(fā)推文、廣告、砍價小程序的敬請繞道！一定記得備注「交流學習」，我會盡快通過好友申請哦！通過好友后私聊我「學習資料」或者「進群」都可以。
掃碼添加，備注:交流學習
往期推薦010203
朕已閱
