# 用CSS處理消防員殉職 全網頁灰階語法教學

## 先上效果


---

## 起因

2023/9/22，屏東高爾夫球具廠大火爆炸，第一批人員剛進入射水立刻發生爆炸，因為廠房中有許多化學物質是遇水起反應，10位消防員在火場中救人殉職。

隔天看到新聞寫消防署官網改黑白

---

## 實務技術

改黑白是利用 css 的遮罩(filter)，這是IE不支援的語法，也是有賴近年政府終於徹底擺脫IE，才能這樣快速套效果

附上caniuse的畫面
[](https://caniuse.com/?search=filter%3Agrayscale)

---

## 使用方式

我們可以開啟消防署的網站，觀察他的CSS，可以看到有一段 css 寫這樣，就只有這麼一行而已

<!-- 灰階-->
<style>html{-webkit-filter:grayscale(1);filter: grayscale(100%);}</style>

---

## html 與 css 語法片段截圖


## 說明

利用這段語法，就可以只調整html，很全面的幫全站套上灰階效果，圖片、按鈕、文字等等全面都可以覆蓋到，即使是禮拜六是補班日，也可以快速完成長官想要的 **讓民眾感覺政府有在做事** 需求。

要驗證的話，也可以把這一段css刪除，恢復一下原本彩色版的畫面


---

## 其他延伸內容

其實 css filter 可以做的不只是灰階，高斯模糊、顏色偏移等等也可以，這邊借一下 mozilla 的教學文件截圖，想再深入研究可以點擊[官方連結](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)前往


但還是希望不要只有鍵盤努力，對攸關人命的事情多一點重視吧，生命永遠都是最貴最優先要處理