如何在CSS中覆盖父元素样式？解决子元素opacity受影响问题

父元素设置opacity后，整个元素（包括所有子元素）都会进入半透明状态——子元素的opacity是在父元素透明度的基础上叠加计算的，哪怕给子元素设opacity: 100%，实际显示的还是父元素的37%透明度。这是opacity的固有特性，all: unset或者!important都无法打破这个继承逻辑。

下面是两种可行的解决方案：

方案1：将紫色矩形移出父元素，改为同级元素 #

把.rect1从.rect内部拿出来，通过定位或调整外边距来固定位置，这样它就完全不受父元素的opacity影响了。

.rect {
    width: 500px;
    height: 600px;
    margin-top: 200px;
    margin-left: 300px;
    background-color: black;
    opacity: 37%;
    z-index: -1;
}

.rect1 {
    position: absolute;
    z-index: 10;
    width: 259px;
    height: 300px;
    top: 700px; /* 父元素margin-top(200px) + 原子元素margin-top(500px) */
    left: 350px; /* 父元素margin-left(300px) + 原子元素margin-left(50px) */
    background-color: purple;
    opacity: 100%;
}

<div class="rect"></div>
<div class="rect1"></div>

方案2：父元素不用opacity，改用带透明度的背景色 #

如果父元素只需要背景半透明，不需要让子元素也跟着半透明，就把父元素的opacity: 37%替换成带透明度的背景色，比如rgba格式——这种方式只会让背景半透明，子元素不受任何影响。

.rect {
    width: 500px;
    height: 600px;
    margin-top: 200px;
    margin-left: 300px;
    background-color: rgba(0, 0, 0, 0.37); /* 第四个值对应原opacity的37% */
    z-index: -1;
}

.rect1 {
    position: absolute;
    z-index: 10;
    width: 259px;
    height: 300px;
    margin-top: 500px;
    margin-left: 50px;
    background-color: purple;
    opacity: 100%;
}

<div class="rect">
  <div class="rect1"></div>
</div>

内容的提问来源于stack exchange，提问作者Lethargistic