您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

跨瀏覽器網頁灰度效果實現：CSS Filter + JavaScript 降級方案

編輯：PHP 綜合知識

三種技術路線對比

方案	優點	缺點	適用性
圖片預處理	兼容性完美、零運行時開銷	工作量大、切換困難、動態圖片無法處理	靜態站點、特殊紀念日
IE CSS Filter	代碼極簡 `filter: gray;`	僅 IE 支持、性能差、已棄用	純 IE 內網環境
JavaScript Canvas	現代瀏覽器全支持、可控制範圍	需遍歷 DOM、大圖/多圖性能壓力大、跨域圖片受限	現代項目、臨時灰度需求

推薦方案：grayscale.js 跨瀏覽器庫

基於 Canvas 實現，自動處理圖片、背景圖、Canvas 等元素，支持 IE 6+ 及所有現代瀏覽器。

接入步驟

下載 grayscale.js（GitHub: karlhorky/grayscale）
頁面引入：<script src="grayscale.js"></script>

啟用全站灰度：

window.onload = function() {
    grayscale(document.body);
};

針對性啟用（推薦）

避免對整個 body 處理導致性能問題，精確指定容器：

// 僅對內容區灰度，保留導航、側邊欄正常
grayscale(document.getElementById('content-area'));

// 或針對特定圖片
grayscale(document.querySelectorAll('.post img'));

實戰踩坑記錄

背景圖片消失：大量 background-image 會導致 Canvas 重繪失敗，解決：僅處理 <img> 標籤
跨域圖片污染 Canvas：CDN 圖片需配置 Access-Control-Allow-Origin: * 並給 <img> 加 crossorigin="anonymous"
動態添加內容：AJAX 載入新內容後需重新調用 grayscale()
性能優化：使用 requestAnimationFrame 分批處理，避免主線程阻塞

現代 CSS 替代方案（推薦優先）

現代瀏覽器（Chrome 18+、Firefox 35+、Edge 12+、Safari 6+）原生支持：

.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* Safari 6-8 */
}

配合 @supports 實現優雅降級：

.grayscale {
    filter: grayscale(100%);
}
@supports not (filter: grayscale(100%)) {
    .grayscale {
        /* 老瀏覽器回退：JS 方案或無效果 */
    }
}

最佳實踐總結

優先使用 CSS Filter：零 JS 開銷、GPU 加速、可動畫過渡
舊瀏覽器載入 JS Polyfill：條件註釋或特性檢測按需加載 grayscale.js
限制處理範圍：避免 document.body 全量處理，指定具體容器
提供關閉開關：用戶可手動切換，尊重可訪問性需求

// 完整啟用邏輯
if (CSS.supports('filter', 'grayscale(100%)')) {
    document.documentElement.classList.add('grayscale-supported');
} else {
    // 動態載入 polyfill
    const script = document.createElement('script');
    script.src = 'grayscale.js';
    script.onload = () => grayscale(document.getElementById('main-content'));
    document.head.appendChild(script);
}