Question

可能有一个简单的解决方案，但我似乎无法解决这个问题。我正在制作我制作的设计并将其变成现场。有一个渐变背景和一个暗覆盖层效果。我似乎无法将内容放在叠加层上方。

http://i.stack.imgur.com/Vmtj6.jpg

HTML：

<div class="overlay">
  <div class="container main">
    {{> yield}}
  </div>
</div>

CSS：

html, body {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
        /* Gradient: */
background: #08a8d4;
background: -moz-linear-gradient(45deg,  #08a8d4 7%, #04ffc4 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(7%,#08a8d4), color-stop(100%,#04ffc4));
background: -webkit-linear-gradient(45deg,  #08a8d4 7%,#04ffc4 100%);
background: -o-linear-gradient(45deg,  #08a8d4 7%,#04ffc4 100%);
background: -ms-linear-gradient(45deg,  #08a8d4 7%,#04ffc4 100%);
background: linear-gradient(45deg,  #08a8d4 7%,#04ffc4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08a8d4', endColorstr='#04ffc4',GradientType=1 );


}

.overlay {
height: 100%;
opacity: 0.26;
background: #535353;
position: relative;

}

.main {
    margin-top: 50px;

}

.main h1 {
    color: white;
}

Answer 1

更改

.overlay {
  height: 100%;
  opacity: 0.26;
  background: #535353;
  position: relative;
}

到

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.26;
  background: #535353;
}

Answer 2

您是否尝试过使用CSS z-index选项？将z-index：100应用于您想要引发的内容

Answer 3

您应将.container.main放在.overlay之外，然后在{/ 1>上使用position: absolute

<div class="overlay">
</div>

<div class="container main">
    {{> yield}}
</div>

在position: absolute或.overlay上分配.container，并确保这两个元素的容器还定义了position属性

DIV与css叠加

3 个答案: