Question

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

这就是我应该的网页：

文字＆amp;导览列
重叠
图像

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

重叠
文字＆amp;导览列
图片

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，但我无法让它发挥作用。

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

Answer 2

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

Answer 3

首先，如果你想要覆盖仅覆盖.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;
}

Answer 4

试试这个

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

在图像上添加叠加层

4 个答案: