Question

我有一个固定的标题。当我的身体背景是纯色时，一切都很好 - 身体文字在标题下面。如果我使身体背景不透明，那么身体会越过头部而不是它。导航栏和徽标等位于“headContent”div。

<body>
    <div id="headContent">
    </div>
    <div id="content">
        <p>Content stuff.</p>
    </div>
    </div>
</body>

标题代码在一个单独的文件中，所以我有php链接到它。所以，div的css包含标题下的内容：

#content{
    padding-top: 140px;
    background-color: red;
}

但是只要我添加不透明度，内容就越过标题：

#content{
    padding-top: 140px;
    background-color: red;
    opacity: 0.4;
}

似乎很简单。我尝试过使用z-index。有什么想法吗？

Answer 1

您好，您可以尝试在您的CSS中添加以下内容而不是不透明度，您可以尝试这样做

#content{
padding-top: 140px;
background: rgba(255,0,0,0.5);
}