问题与覆盖和z-索引

我有一个网站是不同部分的1页。在第一部分，我用下面的代码添加蓝色覆盖在第一部分：问题与覆盖和z-索引

<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);

在第二部分，我想使用橙色覆盖层，但是当我将覆盖层应用于覆盖层时，第1部分的覆盖层会出现在我的文本，按钮等前面，并且颜色正在变为橙色。

第二部分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 .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);}

我在做什么错？

感谢您的任何意见。

来源

2016-11-16 penone

它可以帮助你创建CodePen来显示问题。我不确定橙色是否涵盖所有内容或蓝色。 – niemaszoka

你的代码看起来像是在做它应该做的事情，这是**覆盖**（坐在最上面）一些其他元素。所以预计你不能点击项目和文本颜色变化。你究竟想要做什么？ – hungerstar

如果我正确地理解你想要做的事情，你可以尝试按部分添加1个覆盖层，你只想覆盖他自己的部分。

要做TAHT，我会选择为每个部分添加一个容器（以帮助标准化类的行为）使用“绝对”定位而不是“固定”。

.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; 
 
}

<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>

注：你的HTML代码段有问题：第一，你忘了关格，并在第二次关闭最后一个DIV的两倍。

来源

2016-11-16 17:40:19 Dexter0015

问题与覆盖和z-索引

回答

相关问题