當全國哀悼日時，怎麼讓整個網站變成灰色呢？

王铁柱6發表於2024-11-29
網站

有幾種方法可以使整個網站在全國哀悼日期間變成灰色，以下列出一些前端開發常用的技術：

1. 使用CSS濾鏡:

這是最簡單和推薦的方法。 您可以使用CSS filter: grayscale(100%); 將整個網站變為灰色。 為了方便控制，最好將此樣式新增到一個單獨的CSS類中，例如 .grayscale，然後在需要的時候將此類新增到 <body> 元素上。

.grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* 相容 Safari 和舊版瀏覽器 */
  -moz-filter: grayscale(100%); /* 相容 Firefox */
  -ms-filter: grayscale(100%); /* 相容 IE */
  -o-filter: grayscale(100%); /* 相容 Opera */
}

然後，使用JavaScript根據日期動態新增或移除這個類：

const today = new Date();
const mourningDates = [
  //  將哀悼日的日期新增到這裡，例如：
  new Date('2024-04-04'), //  示例日期，請替換為實際日期
  // ...更多日期
];

const isMourningDay = mourningDates.some(date => {
  return date.getFullYear() === today.getFullYear() &&
         date.getMonth() === today.getMonth() &&
         date.getDate() === today.getDate();
});

if (isMourningDay) {
  document.body.classList.add('grayscale');
}

2. 使用SVG濾鏡:

這種方法更復雜，但可以實現更精細的控制，例如對特定元素應用不同的灰度級別。 您可以建立一個SVG濾鏡，然後在CSS中引用它。

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                      0.3333 0.3333 0.3333 0 0
                                      0.3333 0.3333 0.3333 0 0
                                      0      0      0      1 0" />
  </filter>
</svg>

.grayscale {
  filter: url(#grayscale);
}

JavaScript部分與方法1相同。

3. 使用覆蓋層:

您可以建立一個覆蓋整個頁面的半透明灰色層。 這種方法的優點是可以更容易地控制灰度級別和透明度。

<div id="grayscale-overlay" style="display: none;"></div>

#grayscale-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 調整透明度 */
  z-index: 9999; /* 確保覆蓋層在最上方 */
  pointer-events: none; /*  允許點選穿過覆蓋層 */
}

同樣，使用JavaScript根據日期顯示或隱藏覆蓋層：

// ... (與方法1相同的日期判斷邏輯)

if (isMourningDay) {
  document.getElementById('grayscale-overlay').style.display = 'block';
}

選擇哪種方法？

  • 對於簡單的全站灰度效果，CSS filter: grayscale(100%); 是最簡單和高效的。
  • 如果需要更精細的控制或動畫效果，SVG濾鏡是更好的選擇。
  • 覆蓋層方法適用於需要控制透明度或需要在灰色背景上顯示其他內容的場景。

重要提示： 請確保在哀悼日結束後移除灰度效果。 這可以透過在JavaScript中新增一個結束日期的判斷，或者手動移除相關的CSS類或覆蓋層來實現。 並且，請尊重哀悼日的嚴肅性，避免使用過於花哨或不合適的動畫效果。

相關文章