對(duì)于設(shè)置透明度，我們有兩個(gè)可以選的css3屬性：rgba 和 opacity
opacity
用法：
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設(shè)定透明度 。
opacity 屬性能夠設(shè)置的值從 0.0 到 1.0 。值越小，越透明 。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x) 。x 能夠取的值從 0 到 100 。值越小，越透明 。
所以如果項(xiàng)目為了要兼容IE8及以下，則需要寫兩段代碼
RGBA
用法：
RGBA 顏色值是 RGB 顏色值的擴(kuò)展，帶有一個(gè) alpha 通道 - 它規(guī)定了對(duì)象的不透明度 。
RGBA 顏色值得到以下瀏覽器的支持：IE9 、Firefox 3 、Chrome、Safari 以及 Opera 10。
RGBA 顏色值是這樣規(guī)定的：rgba(red, green, blue, alpha) 。alpha 參數(shù)是介于 0.0(完全透明)與 1.0(完全不透明)的數(shù)字 。
那么對(duì)于IE8及以下需要做以下兼容：
【詳解css透明度之rgba和opacity的區(qū)別及兼容】其中：#88000000 的前兩位數(shù)字控制透明度，取值16進(jìn)制從00 -> FF(越小越透明)，00表示完全透明，F(xiàn)F就是全不透明，后面六位是色值 。
**※注意：
如果在IE9里面同時(shí)使用這RGBA兩種方法時(shí)，會(huì)造成沖突而無法做到透明度的實(shí)現(xiàn) 。
而對(duì)于opacity是可以兩個(gè)一起寫，沒有沖突問題!**
opacity 和 rgba 的區(qū)別
為此我們?cè)O(shè)置了兩個(gè)盒子來作為對(duì)比
html代碼：
css代碼：
結(jié)果如圖：
從上面的結(jié)果我們可以看到 opacity 可以影響字體以及紅色小方塊的透明度，而 rgba 不會(huì) 。
說明了子元素會(huì)繼承父元素的 opacity 屬性
推薦閱讀
- css多種方式實(shí)現(xiàn)等高布局的示例代碼
- 10分鐘入門CSS3 Animation
- IE8下jQuery改變png圖片透明度時(shí)出現(xiàn)的黑邊
- 詳解為生產(chǎn)環(huán)境編譯Angular2應(yīng)用的方法
- css實(shí)現(xiàn)文字居中兩邊橫線效果的示例代碼
- 淺談CSS 高度塌陷問題
- 930機(jī)子藍(lán)牙使用篇---上傳下載文件詳解
- 830系統(tǒng)自帶輸入法詳解
- IE瀏覽器下出發(fā)CSS的haslayout屬性是什么？
- 830主題、鈴聲設(shè)置詳解