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

2021-08-13 21:20:08 字數 661 閱讀 5370

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

設定父元素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即可。

css 設定透明度

要設定某一元素的背景為透明,在 chrome firefox opera 下是這樣的 css background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0 1之間。在 ie 中一般是這樣的 css background color r...

CSS 透明度屬性

firefox3.5已不支援私有屬性 moz opacity了,在mozilla 1.7 firefox 0.9 之前ff都是使用這個私有屬性的,firefox 0.9 firefox3同時支援 moz opacity和opacity這兩個屬性,firefox公升級到3.5之後,一些 原來有的透明沒...

CSS設定div元素的透明度

在ie中需要通過 filter 來定義透明度 opacity 而在mozilla中是可以直接解析 opacity 所以如果要使得這個效果在兩種瀏覽器中都得到支援,需要把兩種設定都加進去。div 用下面的樣式表定義你的div可以有各種過度效果。alpha是div的class.精心開發5年的ui前端框架...