你知道現在有多火嗎？用這種很大的，高質量的，支援 Retina 屏的模糊的 JPEG 圖片作為 header 背景 :
See the Pen Web site header, circa 2016 by Taylor Hunt (@tigt) on CodePen.
潛在的問題是如果瀏覽器不支援濾鏡 filter，文字將不可讀 。這違背了可訪問性的原則，再完美的視覺也無濟於事。
支援和不支援 filter 的效果對比
因此呢，你需要提前準備好處理模糊的圖片，可是設計師偏要你實現動態模糊呢，圖片不固定，跟 Apple 的效果一樣一樣的，咋辦？如果是使用者上傳的圖片又咋辦？嗯，你需要一臺圖片處理伺服器，聽起來成本很高。
我碰巧想到一個妙招，讓不支援 filter 的瀏覽器用顏色圖層代替，方案並不完美，但是具有高可讀性：
不支援 filter 的效果
基本實現
我用偽元素作為背景，因為給元素加 filter 比單純給背景加 filter 相容性更好 。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.backdrop { position: relative } .backdrop::after { content: ""; /* 鋪滿整個父元素 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 放到父元素內容的下層 */ z-index: -2; /* 像父元素一樣展示背景 */ background: #222 url("inspirational-landscape-and/or-laughing-with-salad.jpg"); } |
加特效
此時，設計師發話了，讓背景圖模糊一下，再來個輕微變暗效果就更好了。
|
1 2 |
/* 不要忘記字首，Safari >9.1 和所有 Chrome 仍然需要 -webkit- */ filter: blur(4px) brightness(75%); |
這麼做還遠遠不夠，不支援 filter 的瀏覽器將嚴重影響閱讀。
上妙招
是否聽過 filter 有 opacity() 效果 ？對比廣泛支援的 opacity 屬性，它顯得有點雞肋，但是它的存在才使得相容方案得以實現：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.backdrop::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 把它放到其它偽元素的上面，但是仍在父元素內容的下面 */ z-index: -1; /* 讓遮罩層足夠的暗，無論什麼背景都可以看清楚上面的文字 */ background: rbgba(0,0,0, 0.5); /* 使用濾鏡完全隱藏它？？ */ filter: opacity(0%); } |
如果支援 filter 濾鏡，帶圖片的偽元素是模糊的，微微變暗的，這一黑色的遮罩層是完全透明的。如果不支援濾鏡呢，顯示效果並不完美，但是不會阻礙任何人閱讀上面的文字。
CodePen 的例子在此，希望你喜歡：
See the Pen Filtered background with fallback for legibility by Taylor Hunt (@tigt) on CodePen.
其它 filter 濾鏡的使用或許也能受此啟發，我把它放到了我的錦囊裡。
何不用 @supports 代替？
瀏覽器對 CSS 特性檢測（@supports）的支援程度跟 filter 保持一致 ，替換以後程式碼更加清晰明瞭：
|
1 2 3 |
@supports (filter: blur(4px) brightness(75%)) or (-webkit-filter: blur(4px) brightness(75%)) { /* 瀏覽器支援 filter 的話... */ } |
你完全可以這麼寫，全看個人喜好。我查閱了 CanIUse 的使用資料，有一些環境仍不支援 @supports ：
- Chrome 18–27
- Safari 8.x
- UC Browser 9.9（撰寫本文時）
直到2016年5月，以上瀏覽器的聯合使用份額是 ≈ 美國 3.6%、世界範圍 10.5%（感謝大洋彼岸 UC 的盛行）。這些數字會隨著時間流逝逐漸減少，到那時，如果想寫更加清晰的 CSS 就推薦使用 @supports 了。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
