透明作為一種效果增強的方案，被眾多視覺設計師喜歡。但因為 IE 的原因，透明，特別是半透明，已經成為前端工程師最不愿意實現的東西。現在有一個需求，需要對一個純色的層實現半透明效果。效果如下，邊框需要透明，透明度為 #000000 的 30%：

?

用各種瀏覽器打開下面這個 DEMO, IE9 有特殊顯示：

DEMO: 背景半透明最佳實踐 ?

一、使用 opacity + Alpha Filter

看起來手挺簡單的吧？嗯。挺簡單的… 希望你能很方便實現這個方案！其實見到這個的時候，我們的第一想法當然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 濾鏡來實現。然后，我們得到這樣的效果：

.opacity{background:#000;opacity:0.3;filter: alpha(opacity=30); }

無一例外，最外層，最內層和文字，都被設置了 opacity（alpha 也是使用 opacity ） 。當然，我們可以給各層設置 opacity 變回來。但這是多麻煩的事(不信試一下)。

二、最佳實踐：rgba色彩 + Gradient Filter

其實我們可以選用 background-color: rgba() 來實現，同樣可以實現透明效果，并且只應用于當前元素，不繼承。而 IE 的 filter 有很多濾鏡效果。其中的漸變濾鏡，只要變通一下，就可以實現我們想要的效果，并且這個濾鏡不會被下級元素繼承，這樣元素的內容就不會被虛化。代碼如下：

/** filter 漸變濾鏡詳細用法，[]* StartColorStr 和 EndColorStr:* #4c000000 是 30% 透明度的 #000000 的意思* 組成: # + 透明度 + 顏色* 算法: Math.floor(0.6 * 255).toString(16);*/ .rgba{background:rgba(0, 0, 0, 0.3);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000'); }

?不過，我們得到的效果是這樣的，IE9 的透明度竟然有 60%!! 這顯然不是我們想法的。原因是：IE9 也支持 filter，使得 filter 的結果和 background-color 疊加，所以是 60%。具體參見 DEMO 和示例圖:

那么我們可以利用 IE 的 HACK，單獨把 IE9 的 filter 變成透明度為 0 即可。高級瀏覽器大部分支持 :root 偽類，但不支持 filter 屬性，而 IE 只有 IE9 支持，所以我們可以這樣寫。代碼如下：

:root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }

?當然，第二種方法可以應用于 background，也可應用于 border 上。整體的代碼可參見 DEMO。最后，還是那句話，期待你更好的解決方案。

參考文獻：

• CSS background transparency without affecting child elements, through RGBa and filters
• MSDN: Gradient Filter
• MSDN: Alpha Filter
• IE9 Only Hack

?

轉載于:https://blog.51cto.com/3465667/702966

總結

以上是生活随笔為你收集整理的背景半透明最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。