Question

我有一个包含不同部分的1页网站。在第一部分，我使用以下代码在第一部分添加蓝色叠加层：

<header class="text-center" name="home">    
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</header>

这是.cover.blue的css：

.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}

.cover.blue{
background-color: rgba(5, 31, 60, 0.6);

在第二部分中我想使用橙色叠加层，但是当我为叠加层应用div时，第一部分的叠加层会出现在我的文本，按钮等之前，颜色会变为橙色。

第二节html：

<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>  
</div>
</div>
</div>

Css for .cover.orange

.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}

.cover.orange{
background-color: rgba(37, 28, 5, 0.6);}

我做错了什么？

感谢您的任何意见。

Answer 1

如果我核心地了解你想要做什么，你会尝试按部分添加1个叠加，你想要只覆盖他自己的部分。

要做到这一点，我会选择为每个部分添加一个容器（以帮助标准化类的行为）使用＆＃34;绝对＆＃34;定位而不是＆＃34;固定＆＃34;。

＆＃13;

.container {
  position: relative;
  z-index: 1;
}
.cover{
  position: absolute;
  opacity: 0.5;
  background-color: grey;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 3;
  }

.cover.blue{
  background-color: blue;
}

.cover.orange{
  background-color: orange;
}

＆＃13;

<header class="text-center" name="home">    
<div class="container">
  <div class="cover blue" data-color="blue"></div>
  <div class="intro-text">
    <h1 class="wow fadeInDown">Site Header</h1>
  </div>
  </div>
</header>

<div id="about-section">
  <div class="container">
    <div class="cover orange" data-color="orange"></div>
    <div class="section-title text-center wow fadeInDown">
      <h2>Section 2</h2>
      <hr>
      <div class="clearfix"></div>
      <h4>Choose</h4>
    </div>  
  </div>
</div>

＆＃13;

注意：您的HTML代码段存在问题：首先，您忘记关闭div，然后在第二个关闭最后一个div两次。

覆盖和z-index问题

1 个答案: