如何讓父元素有透明度,但裡面的子元素不透明

2022-05-04 23:54:12 字數 813 閱讀 8676

方法1:使用透明的

將父元素的背景顏色透明,然後使用一張帶透明的背景覆蓋整個區塊,然後再這個區塊中新增的子元素就不會透明

方法2:背景色透明 rgba來代替

opacity

css3中新增了一種顏色表示方法,就是rgba,前面三個引數表示顏色,第四個引數表示透明度

完全可以用背景色透明 rgba來代替

opacity,opacity這個屬性指定的透明是包括裡面的元素的,不可能只有外面透明,裡面不透明,如果使用opacity這個屬性,那麼所有子孫元素都會有透明的效果

html結構:

1

<

body

>

2<

div

class

="contain"

>

3<

div

class

="child"

>

4<

p>如何讓父元素有透明度,但裡面的子元素不透明

p>

5div

>

6div

>

7body

>

css樣式**:

1*5

html,body

10.contain

19.child

28.child p

最終顯示的效果

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

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

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

需求 獲取16進製制顏色之後轉換成rgba顏色,然後設定rgba引數的第四個引數,透明度,子元素則不會繼承 changebgc color 0.3 height 100 fromhex color bits color.length 4?4 8,如果是shorthand,fff,那麼bits為4位,...

CAD軟體中如何設定透明度?CAD透明度設定教程

cad透明度設定步驟 1.設定圖層透明度 在浩辰cad中開啟圖紙檔案後,在命令列輸入快捷命令 la,按回車鍵確認,即可調出 圖層特性管理器 對話方塊,在其中可以看到有一列是 透明度 單擊所要修改的圖層名稱後面的透明度值,便會彈出 圖層透明度 對話方塊,在其中輸入透明度數值即可。如下圖所示 此圖層上透...