css父元素透明度(opacity)對子元素的影響


首先子元素會繼承父元素的透明度

  • 設置父元素opacity:0.5,子元素不設置opacity,子元素會受到父元素opacity的影響,也會有0.5的透明度。

其次子元素的透明度是基於父元素的透明度計算的

  • 設置父元素opacity:0.5,即使設置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基礎上設置的,因此子元素的opacity還是0.5。

解決辦法

利用CSS3屬性rgba(即red+green+blue+alpha的顏色),

例如background-color:rgba(0,0,0,0.5)

但是IE7/8不支持此屬性,可按如下方法寫:

父元素div要寫如下:

background-color: rgba(0,0,0,0.5)!important;

background-color: #000;

filter:Alpha(opacity=50);

子元素div加個定位position:absolute/relative即可。


覺得有幫助的小伙伴右上角點個贊~

在這里插入圖片描述

掃描上方二維碼關注我的訂閱號~

覺得有幫助的小伙伴點個贊~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM