在图像上添加叠加层答案

【问题标题】：Add overlay over image在图像上添加叠加层
【发布时间】：2016-03-29 06:42:16
【问题描述】：

我正在尝试在图像上添加叠加层。图像是背景图像。叠加层有效，但它涵盖的不仅仅是图像。

这就是我应该网页的样子：

文本和导航栏
叠加层
图片

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

叠加层
文本和导航栏
图片

HTML：

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

CSS：

 .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，但无法正常工作。

【问题讨论】：

尝试在叠加层上将 z-index 设置为 -1
你可以发布一个工作的 jsfiddle 以便它可以帮助我们处理它
@DrinkinPeople 我应该将哪个类/id 的 z-index 设置为 -1？
我怀疑 ID #index-front 在某些时候会让你头疼。你开始很好地使用类。为您的index-front 这样做
@RokoC.Buljan 已修复。

标签： html css

【解决方案1】：

添加position: relative; 和overflow: hidden;。

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

https://jsfiddle.net/afelixj/rxf3rnyy/

【讨论】：

【解决方案2】：

首先，如果您希望叠加层仅覆盖 .image-main div，那么您需要将此 div 设置为相对位置。然后为安全起见，将其 z-index 设为 1。然后将 .overlay div 的 z-index 设置为 -1，使其堆叠在 div 中的所有内容后面。像这样：

注意：我将 .image-main div 设置了一个高度，以便您看得更清楚。

这里有一个小提琴给你看Fiddle

 .image-main {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-attachment: fixed;
    transition: all 0.2s ease;
    position:relative;
    z-index: 1;
    height: 500px;
}

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

【讨论】：

【解决方案3】：

试试这个

在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 类的宽度和高度

【讨论】：

谢谢，这可行，但它会在页面顶部添加一个黑色空间（大约 140 像素）。
我的回答仅与图像主类（div）有关。它从不创造任何黑色空间。你应该检查你的CSS。这可以帮助你

【解决方案4】：

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

<div class="image-main">
  <?php include 'navbar.php'; ?>

  <div class="index-front">
    text
  </div>
  <div class="overlay"></div>
</div>

你想要这样的东西吗？

更改z-index 值

【讨论】：

我希望叠加层只覆盖图像，而不是文本。图像和叠加层的高度是使用 jQuery 函数 btw 设置的。
<div class="imageDiv"><img/></div> 您正在关闭 <img> 标记，但您从未打开过。
该示例有效，但在我自己的页面上，叠加层位于我认为的图像后面。
@bramhaag 不确定时不要说任何事情。确保叠加层在哪里