背景:
我們既可以制作半透明的邊框,又可以制作半透明的背景蝴簇。
代碼:
.rgba{
background: rgba(255,0,0,0.5);
}
.opacity{
background: red;
opacity: 0.5;
}
當(dāng)用這兩種樣式制作半透明背景時(shí)杯活,產(chǎn)生效果:
產(chǎn)生原因:
子元素 opacity 會(huì)繼承父元素的 opacity 屬性,而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性熬词。
opacity屬性的值旁钧,可以被其子元素繼承。例如互拾,我們將上面圖中div里面的文字用p標(biāo)簽括起來(lái)歪今,盡管,我們只給div設(shè)了不透明度颜矿,但是我們的p標(biāo)簽中的文字也是有透明度的寄猩。
總結(jié):
所以RGBA相對(duì)于Opacity還是技高一籌的。當(dāng)然骑疆,只要是涉及到顏色的都可以用RGBA來(lái)設(shè)置焦影,比如上面用到的background-color、text-shadow封断、box-shadow斯辰。