在 CSS 样式表中,有时我们想要让一个元素和它的父元素拥有相同的透明度,但是发现它的透明度并没有继承父元素的透明度。为什么会出现这种情况呢?.parent { background-color: r
在 CSS 样式表中,有时我们想要让一个元素和它的父元素拥有相同的透明度,但是发现它的透明度并没有继承父元素的透明度。为什么会出现这种情况呢?
.parent { background-color: rgba(255, 255, 255, 0.8); } .child { background-color: #000; opacity: 0.6; }
以上代码说明了父元素设置了背景色并设置了不透明度为 0.8,子元素设置了不透明度为 0.6。我们会发现,子元素的背景色并没有继承父元素的透明度,子元素自己的不透明度为 0.6,所以子元素看起来比父元素更加透明了。
这是因为 CSS 中,透明度是由不透明度和背景色混合计算得出的,如果你在子元素中设置了具体的背景色,那么它的透明度计算就会忽略父元素的透明度,而只是根据子元素自己设置的透明度计算得出。
所以,如果想要子元素拥有和父元素相同的透明度,我们可以避免在子元素中设置具体的背景色,而是使用 inherit 来继承父元素的背景色:
.child { background-color: inherit; opacity: 0.6; }
这样就可以让子元素拥有和父元素相同的透明度了。
粉丝
0
关注
0
收藏
0