Question

尝试建立具有透明封面图像和彩色覆盖层的英雄风格标头；然后在此上方显示一些文本。我正在使用引导程序3作为底层框架。

我将英雄包裹在一个div中，然后有两个孩子div。一个包含背景色图层，另一个包含文本/标题。

背景div层脱离了父包装div，并覆盖了其下面的整个视口。我不确定我哪里出错了。

我尝试失败的过程： Fiddle

#page-title {
  font-size: 2.2em;
  padding: 20px 40px;
  margin-bottom: 40px;
}

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.bg-wrapper {
  background-image: url(/whatever.png);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

<div class="bg-wrapper">
  <div class="bg-layer"></div>
  <header id="page-title">
    <div class="container">
      About Us </div>
  </header>
</div>

Answer 1

在z-index上添加高.bg-layer，因为引导CSS navbar类的默认z-index为1000

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index:1001;;
}

https://jsfiddle.net/lalji1051/9b46x5yo/3/

Answer 2

您所有的代码都很好，只需将position: relative;这行添加到.bg-wraper类中，您将获得所需的结果！

#page-title {
  font-size: 2.2em;
  padding: 20px 40px;
  margin-bottom: 40px;
}

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  background-color: #f005; /* just adding this for visibility*/
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.bg-wrapper {
  background-image: url(/whatever.png);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  /*Just this additionale property*/
  position: relative;
}

<div class="bg-wrapper">
  <div class="bg-layer"></div>
  <header id="page-title">
    <div class="container">
      About Us </div>
  </header>
</div>

透明叠加div层突破了父容器？

2 个答案: