嵌套div显示异常：置于带opacity的div上方的div无法正常显示

我有一份示例代码在在线代码编辑器上，这是一个书单页面，目前遇到的问题是：放在带有opacity属性的div上方的子div无法正常显示。我喜欢编写HTML，但水平有限，这个问题看似简单，但求助他人也没能解决，而且页面代码较多不便全部粘贴。另外页面的标签部分是朋友用SVG写的，他现在休假无法咨询。

我尝试了以下样式调整，但没有效果：

.opaq {
    padding: 4.5rem 0 0 0;
    background-color: rgb(255, 255, 255 / .6);
    opacity: 0.6;
}
.solid {
    padding: 4.5rem;
    margin: 0 4.5rem 4.5rem 4.5rem;
    background-color: white;
}
.main {
    padding: 4.5rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 2.75rem;
    line-height: 1.08;
    font-weight: bold;
}

对应的HTML片段：

<div class="content-area">
<!-- 所有内容（包括表格）都放在这里，会显示在图片上方 -->

<div class="tile">
<div class="opaq">
<div class="solid">
<div class="leadb">
八位<br>
历史悬疑<br>
作家</div>
<div class="leadc">
作者：semicodin
</div>

解决方案 #

问题核心在于你给.opaq设置了opacity: 0.6——这个CSS属性会让整个元素及其所有子元素都继承半透明效果，哪怕子元素设置了纯白色背景，也会被父元素的透明度影响，导致看起来不是完全不透明的状态。

只需要做一个简单修改：移除.opaq的opacity属性，保留背景色的半透明设置即可。你已经用rgb(255, 255, 255 / .6)实现了背景的半透明，这个写法只会让背景色半透明，不会影响子元素的透明度。

修改后的.opaq样式：

.opaq {
    padding: 4.5rem 0 0 0;
    background-color: rgb(255, 255, 255 / .6);
    /* 移除这一行：opacity: 0.6; */
}

调整后，.solid的白色div就能正常显示完全不透明的状态，不会再被父元素的透明度干扰。

内容的提问来源于stack exchange，提问作者semicodin no.cache