css父元素半透明,不影響子元素(相容IE)

2021-09-13 02:16:19 字數 714 閱讀 5201

opacity:1.0可以設定透明度,但是其子元素都會帶有同樣的透明度,那麼我們可以換一種寫法:background:rgba(0,0,0,0.5)

rgba呢,就是red+green+blue+alpha,也就是紅+綠+藍+alpha透明的顏色。

黑色半透明:

白色半透明:

但是ie8及其以下是不相容rgba的,如果需要相容ie

我們可以使用ie漸變濾鏡,可以使所有主流瀏覽器下元素都實現50%透明的黑色背景:

background

:rgba

(0,0,0,0.5)

;filter

:progid

:dximagetransform.microsoft.gradient

(startcolorstr=#7f000000,endcolorstr=#7f000000)

;

CSS 設定背景透明度,不影響子元素

由於 opacity 屬效能被子元素繼承,使用它設定父元素背景透明度時也會影響子元素 解決方法 1 使用 rgba example 1 classname 2 使用 opacity,設定乙個背景div,此div使用絕對布局 example 123 content here 4demo 1 docty...

元素半透明

知識擴充套件 dximagetransform.microsoft.gradient 濾鏡裡的 startcolorstr 引數值是 aarrggbb 形式的,其中的aa是代表不透明度的十六進製制,00表示完全透明,ff就是全不透明,化成十進位制的範圍就是0 255,剩下的 rrggbb 就是顏色的...

CSS實現父元素半透明,子元素不透明的問題

關於這個問題,其實是不熟悉opacity和rgba,下面解釋一波 顏色我們都知道有rgb,在rg個新的值,成b顏色模型增加了一為了rgba顏色模型。最後乙個是alpha通道的值,取值在0.0到1.0之間。兩者控制透明度的都是乙個小數,從0到1,0.0是完全透明,1是完全不透明。opacity屬性的值...