關於css設定層透明

之前自己做UI的時候，需要用到透明，於是百度了下，找到了點方法，達到了效果，並沒深究，但是近幾天在做UI的時候發現透明層中的子節點中的元素的不透明不大好控制

於是稍作研究下，在此記錄下：

當然，達到透明，很多一般使用三種方式：

1、直接使用透明圖片，這個確實比較直接省事，不過往往需要再製作圖片，個人認為，可維護性不好

2、使用如下代碼設定透明度，可是你會發現這種方式不能對其子節點的元素設定不透明

filter: alpha(opacity = 50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;

3、這種方法僅僅使用簡短的代碼，即可以實現設定透明度，也可以實現其中的文字以及節點中的元素設定不透明

   首先需要先對需要透明的層設定如下樣式：

background: rgba(255,255,255,0.5) none repeat scroll !important;/* 確保Firefox等瀏覽器的透明度，同事達到設定其子節點中的元素不透明 */background:#fff;filter: alpha(opacity = 50);/* 為IE瀏覽器設定濾鏡來達到透明的效果 */

然後對其子節點設定如下樣式：

position: relative;/* 用來設定IE瀏覽器中其子節點中的元素不透明 */

如此，就可以實現設定透明度，也可以實現其中的文字以及節點中的元素設定不透明了。