前言
sdkfh
shdhfk
rgba與opacity的區(qū)別愈涩，其實(shí)說(shuō)了無(wú)數(shù)次了捧灰，但是我自己在重復(fù)一次吧喳钟，多多益善律想。
開(kāi)門見(jiàn)山
區(qū)別就是opacity會(huì)繼承父元素的 opacity 屬性逞壁，而rgba設(shè)置元素的后代元素不會(huì)繼承不透明屬性
opacity
語(yǔ)法
opacity: value|inherit;
value 取值0~1流济，0為完全透明，1為完全不透明腌闯。默認(rèn)是繼承父元素opacity屬性绳瘟，所以子元素會(huì)繼承父元素的opacity屬性值，從而產(chǎn)生相同的效果绑嘹。
但是單獨(dú)設(shè)置子元素opacity的值會(huì)產(chǎn)生單獨(dú)的效果稽荧，前提是屬性值小于等于父元素的屬性值，否則修改無(wú)效工腋，繼承保持父元素的屬性值姨丈。
<div class='box opacity'>
opacity
<div class='a'>opacity
<div class='b'>opacity</div>
</div>
</div>
// a、b的屬性值都小于父元素擅腰，所以有效
.opacity{
opacity:.9;
}
.a{
opacity:.6;
}
.b{
opacity:.3;
}
//a蟋恬、b的屬性值都大于父元素，所以無(wú)效趁冈，保持和父元素一致
.opacity{
opacity:.5;
}
.a{
opacity:.8;
}
.b{
opacity:1;
}
rgba
語(yǔ)法
rgba(r,g,b,a)
rgba函數(shù)在rgb顏色模式基礎(chǔ)上增加了alpha通道歼争，alpha通道是不透明度，這樣可以在設(shè)置顏色的同時(shí)去設(shè)置透明度渗勘。alpha取值在0~1之間沐绒。
設(shè)置rgba只會(huì)對(duì)元素本身產(chǎn)生影響，因?yàn)闊o(wú)法繼承旺坠，所以不會(huì)對(duì)子元素產(chǎn)生影響乔遮。
<div class='rgba box'>rgba</div>
.rgba{
background-color:rgba(0,0,0,.5)
}
參考鏈接
