網站哀弔灰階 CSS 方法

2020-04-04 222 words 2 minutes

Contents

在重大事故、國殤紀念日或哀悼日（如台灣 4 月 4 日兒童節暨清明節紀念、重大災難事件），許多網站會將整個頁面轉為灰階，表達哀悼之意。這個效果只需要一行 CSS 即可實現。

基本原理

CSS 的 filter 屬性可以對元素套用視覺濾鏡效果。其中 grayscale() 函數可以將元素的顏色轉為灰階：

1
2
3


filter: grayscale(100%);
/* 等同於 */
filter: grayscale(1);

grayscale() 接受 0（無效果）到 1（完全灰階）之間的值，或是 0% 到 100% 的百分比。

套用到整個網站

將 filter 套用在 html 元素上，可以讓整個頁面（包括所有子元素）變成灰階：

1
2
3
4


html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* 舊版 Safari 相容 */
}

也可以直接寫在 HTML 的 style 屬性上：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html style="filter: grayscale(100%);">
<head>
    <meta charset="utf-8">
    <title>哀悼日</title>
</head>
<body>
    <!-- 頁面內容 -->
</body>
</html>

建議套用在 html 而不是 body，因為 body 的 filter 有時會影響 position: fixed 元素的堆疊上下文。

透過 CSS class 動態切換

實務上可以在需要時動態加上 CSS class，而不是直接修改 HTML：

1
2
3
4
5


/* 在需要哀悼效果的日期加上此 class */
html.mourning {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

1
2
3
4
5
6


// 根據日期自動套用
const today = new Date();
// 例如：每年 4 月 4 日
if (today.getMonth() === 3 && today.getDate() === 4) {
    document.documentElement.classList.add('mourning');
}

部分灰階效果

grayscale() 可以設定 0 到 100% 之間的值，產生半灰階的過渡效果：

1
2
3
4


/* 50% 灰階，保留部分色彩 */
html {
    filter: grayscale(50%);
}

搭配 CSS 媒體查詢

可以結合 prefers-color-scheme 媒體查詢，在深色模式下調整灰階強度：

1
2
3
4
5
6
7
8
9


html.mourning {
    filter: grayscale(100%);
}

@media (prefers-color-scheme: dark) {
    html.mourning {
        filter: grayscale(100%) brightness(0.8);
    }
}

效能注意事項

filter: grayscale(100%) 套用在 html 元素時，瀏覽器需要對整個頁面進行合成（compositing）。在效能敏感的頁面或有大量動畫的場景下，可能會影響渲染效能。但對於一般的哀悼日靜態頁面，幾乎不需要擔心這個問題。

常見應用場景

國家哀悼日：政府或重大機構的官網
重大災難紀念：地震、空難等事件紀念日
名人逝世：相關組織或粉絲頁面
台灣常見場景：清明節、重要紀念日、重大事故發生後的緊急部署