CSS設定父元素透明度時,如何不讓子元素繼承

2021-10-09 15:01:48 字數 893 閱讀 1056

需求:

獲取16進製制顏色之後轉換成rgba顏色,然後設定rgba引數的第四個引數,透明度,子元素則不會繼承

changebgc

(color),$

,$, 0.3)`

, height:

"100%",}

},fromhex

(color)

, bits = color.length ==4?

4:8,

//如果是shorthand, #fff, 那麼bits為4位, 每一位代表的個屬性, 其它的為8位 每兩位代表乙個屬性 #ffffff00

mask =(1

<< bits)-1

;//表示位元組佔位符, 向左移4位或8位,var a = (1 << 4 ) - 1 -> 10000 - 1, a.tostring(2); // 1111,或者 8位的 1111 1111

color =

number

("0x"

+ color.

substr(1

));//#ff0000 轉變為16進製制0xff0000;if(

isnan

(color))[

"b",

"g",

"r"]

.foreach

(function

(x))

; t.a =1;

return t;

// color

},

fromhex方法**

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

首先子元素會繼承父元素的透明度 設定父元素opacity 0.5,子元素不設定opacity,子元素會受到父元素opacity的影響,也會有0.5的透明度。其次子元素的透明度是基於父元素的透明度計算的 設定父元素opacity 0.5,即使設定子元素opacity 1,子元素的opacity 1也是...

css 設定透明度

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

CSS設定div元素的透明度

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