關(guān)于CSS透明度的兩種使用方法以及優(yōu)缺點(diǎn)

第一種方法：通過(guò)backgroud和opacity設置背景透明

在建網(wǎng)站時(shí)opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，就是說(shuō)：數字越大代表元素越不透明。參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過(guò)瀏覽器支援度較差，不建議使用。

注意事項：一定要考慮不同瀏覽器的兼容性寫(xiě)法，正確應該這樣寫(xiě)：

.transparent{  

      filter:alpha(opacity=50);  

      -moz-opacity:0.5;  

      -khtml-opacity: 0.5;  

      opacity: 0.5;  

}

類(lèi).transparent代表的是透明度是50%。

opacity背景顏色透明度的弊端：應用此方法會(huì )使整個(gè)box的透明度都變成了50%，包括背景和背景上面的圖片或文字。有時(shí)我們只是想讓背景透明而上面的文字正常顯示，此時(shí)就不合適了，需要考慮使用第二種方法。

第二種方法：利用rgba的方式來(lái)設置背景透明度

網(wǎng)站中所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時(shí)，提供透明度特性。

用法：background:rgba(R,G, B, A); A代表透明度從0.0到1。

示例：

<div style="background-color:rgba(151,25,31,0.5);">背景紅色透明度50%，而上面的文字正常顯示</div>

說(shuō)明：通過(guò)rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明