如標題所示，今天我們談談rgba和opacity有什麼區別？
這次我又來做一次搬運工了，哈哈(●』◡』●)
rgba是代表red（紅色） green（綠色） blue（藍色）和 alpha的色彩空間。
r：紅色值。正整數 | 百分數
g ：綠色值。正整數 | 百分數
b ：藍色值。正整數| 百分數
a ：透明度。取值0~1之間
a代表透明度，我們再來看看opacity( •̀ ω •́ )y
opacity屬性設定元素的不透明級別。
value：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
這麼看來，兩者都是透明度的設定，可是實際用起來卻不一樣。
經過實戰，我們會發現設定了opacity的元素內的子元素們都被影響了，設定了opacity的元素它的子元素都繼承了他的設定，透明度都是一樣的。
而rgba所設定的透明度，只會影響他自己本身，而其中的子元素不會被其所影響。
看到了rgba的特性，我們想到了什麼？
沒錯！就是遮罩層！
就是那種彈框之後的透明深色背景，很炫的那種(●』◡』●)
直接上**：
html:
class
="shade"
>
class
="pop_up"
>
這是彈框div
>
div>
.shade
rgba:
r：紅色值。正整數 | 百分數
g：綠色值。正整數 | 百分數
b：藍色值。正整數 | 百分數
a：alpha透明度。取值0~1之間。
opacity:
後面的取值為從 0.0 （完全透明）到 1.0（完全不透明）。
兩者的區別：opacity會繼承父元素的 opacity 屬性，而rgba設定的元素的後代元素不會繼承不透明屬性。
rgba 中 的 a 指的是透明度:
rgba的 設定的 透明度 不會被子級 元素繼承;opacity設定的透明度會被子級元素繼承 . 因此 ,有時候 使用rgba會比opacity效果更好;
rgba 可以設定background-color , color , border-color , text-shadow , box-shadow,
例項: 在乙個背景 上 ,設定 乙個子背景 ,這個子背景 透明, 同時 子 背景中的內容不透明 .
lang
="zh-cn"
>
>
charset
="utf-8"
>
>
opaciyttitle
>
type
="text/css"
>
.bg-box
.bg.bg-content
.bg-content p
style
>
head
>
>
class
="bg-box"
>
class
="bg"
>
div>
class
="bg-content"
>
>
我是bg的後代元素，我不想我的前景有任何透明!怎麼辦?p
>
div>
div>
body
>
html
>
bg-content的 兄弟 節點bg加上 透明度 .
同時絕對定位 ,使得bg和bg-content重合 ;
同時bg的z-index要 小於bg-content的z-index, 使得bg在bg-content下面.
如果 不是上面的那樣 ,而是 給bg-content的父級 加上透明度 , 那麼bg-content就會繼承透明度,bg-content中的內容 也會繼承透明度. 這樣就不是我們想要達到的效果了.
lang
="zh-cn"
>
>
charset
="utf-8"
>
>
opaciyt-2title
>
type
="text/css"
>
.bg-box
.bg.bg p
style
>
head
>
>
class
="bg-box"
>
class
="bg"
>
class
="bg-content"
>
>
我是bg的後代元素，我不想我的前景有任何透明!怎麼辦?p
>
div>
div>
div>
body
>
html
>
lang
="zh-cn"
>
>
charset
="utf-8"
>
>
rgbatitle
>
type
="text/css"
>
.bg-box
.bg-content
.bg-content p
style
>
head
>
>
class
="bg-box"
>
class
="bg-content"
>
>
我是bg的後代元素，我不想我的前景有任何透明!怎麼辦?p
>
div>
div>
body
>
html
>
rgba類:
.rgba
rgba與opacity的異同
相同之處 都可以實現改變元素的透明度 不同之處 rgba opacity 影響範圍 自身自身 後代元素 使用範圍 實現背景透明，文字不透明 使用方法 rgba r,g,b,a opacity value inherit rgba只會改變自身透明度，而opacity除了改變自身透明度外，其所有後代還會...
rgba 和opacity的使用
rgba 表示 紅 綠 藍 alpha w3c指在原有的rgb顏色模型之後增加了 alpha 引數，可以讓制定的顏色透明化 rgb 上擴充套件的，其只可以設定顏色，而不能使設定的顏色透明化 例子 rgba 55,146,179,5 rgb值為 55,146,179 5使設定的rgb值為50 透明,1...
rgba 和opacity的使用
rgba 表示 紅 綠 藍 alpha w3c指在原有的rgb顏色模型之後增加了 alpha 引數，可以讓制定的顏色透明化 rgb 上擴充套件的，其只可以設定顏色，而不能使設定的顏色透明化 例子 rgba 55,146,179,5 rgb值為 55,146,179 5使設定的rgb值為50 透明,1...