文章目錄

• 前言
• 一、實現原理剖析
• 二、對需要修改的 CSS 定位
• 三、具體代碼實現及灰度區分
• 總結

---

前言

公祭日其世界意義在于，促使人類歷史記憶長久保持喚醒狀態，而避免出現哪怕是片刻的忘卻與麻木，共同以史為鑒、開創未來，一起維護世界和平及正義良知，促進共同發展和時代進步。可能也會有小伙伴們好奇，公祭日當天好多大型網站主頁都變成了黑白色調，用以提醒人們銘記歷史，勿忘國殤，在技術層面看這是如何實現的呢？

---

說明：由于部分原因，本文修改案例為無版權網站 Pixabay。

一、實現原理剖析

正常頁面就是我們日常所看到的，如下圖所示：

要實現頁面整體色調變換，我們一般都是直接去 CSS 文件里面進行修改，那么具體應該怎么做呢？

二、對需要修改的 CSS 定位

我們這里通過打開 Google 瀏覽器調試模式來實現快速預覽。

首先在 Elements 里面點擊 body 標簽，在右側出現的功能欄里找到 style 屬性，具體點擊位置如下圖所示：

這里我們將通過修改全文 element 的 style 來實現快速實現頁面色調修改，具體位置如下圖所示：

當然，具體代碼中我們就在 element.style 調整即可，具體代碼如下：

element.style { }

三、具體代碼實現及灰度區分

這里我們用到過濾器 filter，輸入 filter，我們可以看到它有眾多的屬性，如下圖所示：

我們本次用到的屬性是灰度 grayscale()，括號里面跟的是元素灰度百分比。在下面的步驟中我將按照灰度遞增的順序來帶大家認識不同灰度對頁面的實現效果。

• 當灰度百分比為 0 時，我們可以看到頁面是正常狀態的，所以正常頁面默認 grayscale(0)，這時實現代碼及頁面狀態如下圖所示：

element.style {filter: grayscale(0); }

• 當灰度百分比為 0.5（50%） 時，我們這時看到頁面變成了半灰度狀態，這時實現代碼及頁面狀態如下圖所示：

element.style {filter: grayscale(0.5); }

• 當灰度百分比為 1（100%） 時，我們這時看到頁面變成了全灰狀態，即黑白頁面，這時實現代碼及頁面狀態如下圖所示：

element.style {filter: grayscale(1); }

這時的頁面也就是我們在公祭日當天所看到的頁面狀態，黑白色。

---

總結

每個民族都有每個民族的歷史，“中國人民抗日戰爭的勝利為世界反法西斯戰爭的勝利作出了不可磨滅的歷史貢獻，共同消除了威脅世界和平的法西斯邪惡勢力，壯大了人類的進步力量，促進了全球的民族解放運動，對世界和平事業產生了深遠影響。”

---

我是白鹿，一個不懈奮斗的程序猿。望本文能對你有所裨益，歡迎大家的一鍵三連！若有其他問題、建議或者補充可以留言在文章下方，感謝大家的支持！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的filter 灰度处理：公祭日，一行代码让页面变成黑白色调的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。