网格 位于不透明的 div 之上的 div 存在问题

Question

我有一个 Codepen 这里。

正如标题所说，我没有解决方案来了解如何让位于不透明的 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;
}

<div class="content-area">
<!-- All content goes in here including tables and will sit on top of the image. -->

<div class="tile">
<div class="opaq">
<div class="solid">
<div class="leadb">
Eight<br>
History Mystery<br>
Writers</div>
<div class="leadc">
by semicodin
</div>

Answer 1

该问题是由于拼写错误或声明不正确造成的。

你有

background-color: rgb(255, 255, 255 / .6);

用逗号替换正斜杠：

background-color: rgb(255, 255, 255, .6);

另请参阅我不想在 CSS 中继承父级的子级不透明度