Html 在图像上添加覆盖

我正试着在图像上加一个覆盖层。该图像是背景图像。覆盖层可以工作，但它不仅仅覆盖图像

这就是我的“应该”网页的外观：

文本和导航栏

覆盖层

形象

但是页面现在看起来像这样：

覆盖层

文本和导航栏

形象

HTML:

<div class="image-main">
    <?php include 'navbar.php'; ?>
    <div class="index-front">
         text
    </div>
    <div class="overlay"></div>
</div>

 .image-main {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-attachment: fixed;
    transition: all 0.2s ease;
}

.index-front {
    margin-top: 50px;
    text-align: center;
    display: block;
    color: #CCCCCC;
    z-index: 4;
}

.overlay {
    background-color: #333;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.75;
    z-index: 2;
}

我试过摆弄z-index，但没能让它工作。

.image main{
背景图像：url（'/img/background.jpg'）；
背景尺寸：封面；
背景附件：固定；
过渡：所有0.2秒缓解；
}
.覆盖{
背景色：#333；
位置：绝对位置；
顶部：0px；
底部：0px；
左：0px；
右：0px；
不透明度：0.75；
z指数：-1；
}
.指数前沿{
边缘顶部：50px；
文本对齐：居中；
显示：块；
颜色：红色；
z指数：2；
}

文本

首先，如果希望覆盖仅覆盖.image主div，则需要将该div设置为相对位置。为了安全起见，给它一个z指数1。然后将.overlay div的z索引设置为-1，这样它就可以堆叠在div中的所有内容之后。如下所示：

注意：我将.image主div设置为有一个高度，以便您可以更好地看到它

这是一把小提琴给你看

试试这个

在css中

.image-main {
background-image: url('/img/background.jpg');
background-size: cover;
background-attachment: fixed;
transition: all 0.2s ease;
position:relative;
}
.showPart{
  position:absolute;top:2px;z-index:3;
}
.overlay {
background-color: #333;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0.75;
z-index: 2;
}
#index-front {
margin-top: 50px;
text-align: center;
display: block;
color: #CCCCCC;
} 

在html中

<div class="image-main">
  <div class="showPart">
    <?php include 'navbar.php'; ?>
    <div id="index-front">
         text
    </div>
  </div>
  <div class="overlay"></div>
</div>

文本

---

根据需要编辑showPart类别宽度和高度

添加

位置：相对和
溢出：隐藏

.image-main {
  background-image: url('/img/background.jpg');
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
     position: relative;
     overflow: hidden;
 }

 .index-front {
   margin-top: 50px;
   text-align: center;
   display: block;
   color: #CCCCCC;
   z-index: 4;
      position: relative;
  }

尝试将覆盖图上的z-index设置为-1，您可以发布一个工作的JSFIDLE，以便它可以帮助我们工作it@DrinkinPeople我应该将哪个类'/id的z-index设置为-1？我怀疑id
#index front
在某个时候会让你头疼。你开始很好地使用课堂。这样做是为了你的
索引前端
@RokoC.Buljan修复。我希望覆盖层只覆盖图像，而不是文本。图像和覆盖的高度是用jQuery函数设置的，顺便说一句。
你正在关闭一个
标记，但你从未打开过一个。这个例子很有效，但在我自己的页面上，我认为覆盖在图像后面。@bramhaag不确定时不要告诉任何事情。确保覆盖层是hanks，但它会在页面顶部添加一个黑色空间（大约140像素）。我的答案只与图像主类（div）相关。它从不产生任何黑色空间。你应该检查你的css。那对你有帮助
.image-main {
  background-image: url('/img/background.jpg');
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
     position: relative;
     overflow: hidden;
 }

 .index-front {
   margin-top: 50px;
   text-align: center;
   display: block;
   color: #CCCCCC;
   z-index: 4;
      position: relative;
  }