CSS中層的半透明實現方案

一、使用 opacity alpha filter

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

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

二、最佳實踐：rgba色彩 gradient filter

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

css** /*

* filter 漸變濾鏡詳細用法，[參見這裡]

* startcolorstr 和 endcolorstr:

* #4c000000 是 30% 透明度的 #000000 的意思

* 組成: # 透明度顏色

* 演算法: math.floor(0.6 * 255).tostring(16);

*/.rgba

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

當然，第二種方法可以應用於 background，也可應用於 border 上。