[分享]css不继承父元素透明

在 CSS 样式表中，有时我们想要让一个元素和它的父元素拥有相同的透明度，但是发现它的透明度并没有继承父元素的透明度。为什么会出现这种情况呢？.parent { backgroundcolor: rg...

在 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;
} 

这样就可以让子元素拥有和父元素相同的透明度了。