淺談opacity和rgba

背景:

我們既可以制作半透明的邊框,又可以制作半透明的背景蝴簇。

代碼:

.rgba{
        background: rgba(255,0,0,0.5);
}
.opacity{
        background: red;
        opacity: 0.5;
 }

當(dāng)用這兩種樣式制作半透明背景時(shí)杯活,產(chǎn)生效果:

金金金金.png

產(chǎn)生原因:

子元素 opacity 會(huì)繼承父元素的 opacity 屬性,而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性熬词。

opacity屬性的值旁钧,可以被其子元素繼承。例如互拾,我們將上面圖中div里面的文字用p標(biāo)簽括起來(lái)歪今,盡管,我們只給div設(shè)了不透明度颜矿,但是我們的p標(biāo)簽中的文字也是有透明度的寄猩。

金金金金.png

總結(jié):

所以RGBA相對(duì)于Opacity還是技高一籌的。當(dāng)然骑疆,只要是涉及到顏色的都可以用RGBA來(lái)設(shè)置焦影,比如上面用到的background-color、text-shadow封断、box-shadow斯辰。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市坡疼,隨后出現(xiàn)的幾起案子彬呻,更是在濱河造成了極大的恐慌,老刑警劉巖柄瑰,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闸氮,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡教沾,警方通過(guò)查閱死者的電腦和手機(jī)蒲跨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)授翻,“玉大人或悲,你說(shuō)我怎么就攤上這事】疤疲” “怎么了巡语?”我有些...
    開(kāi)封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)淮菠。 經(jīng)常有香客問(wèn)我男公,道長(zhǎng),這世上最難降的妖魔是什么合陵? 我笑而不...
    開(kāi)封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任枢赔,我火速辦了婚禮澄阳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘踏拜。我一直安慰自己寇荧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布执隧。 她就那樣靜靜地躺著,像睡著了一般户侥。 火紅的嫁衣襯著肌膚如雪镀琉。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天蕊唐,我揣著相機(jī)與錄音屋摔,去河邊找鬼。 笑死替梨,一個(gè)胖子當(dāng)著我的面吹牛钓试,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播副瀑,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼弓熏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了糠睡?” 一聲冷哼從身側(cè)響起挽鞠,我...
    開(kāi)封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎狈孔,沒(méi)想到半個(gè)月后信认,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡均抽,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年嫁赏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片油挥。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡潦蝇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出深寥,到底是詐尸還是另有隱情护蝶,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布翩迈,位于F島的核電站持灰,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏负饲。R本人自食惡果不足惜堤魁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一喂链、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妥泉,春花似錦椭微、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至刽沾,卻和暖如春本慕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背侧漓。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工锅尘, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人布蔗。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓藤违,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親纵揍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子顿乒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1、屬性選擇器:id選擇器 # 通過(guò)id 來(lái)選擇類名選擇器 . 通過(guò)類名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,621評(píng)論 0 7
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案泽谨? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • CSS3簡(jiǎn)介 CSS3的現(xiàn)狀 瀏覽器支持程度差淆游,需要添加 私有前綴 ; 移動(dòng)端支持優(yōu)于PC端隔盛; 不斷改進(jìn)中犹菱; 應(yīng)用...
    magic_pill閱讀 782評(píng)論 0 1