html - 向背景图像添加深色叠加层

Question

我看过几篇有关此的 SO 帖子:我想通过添加叠加层来使当前背景图像变暗。

#header1 {
  background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
  background-position:center center;
  position: relative;
  background-size: cover;
  padding-bottom:5em;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

<div class="header">
  <div class="overlay">
    <div class="jumbotron" id="header1">
      <h1>Hello</h1>
    </div>
  </div>
</div>

也许我不明白如何使用 z-index，或者我在这里遗漏了什么。用于着色的深色背景未显示。有什么指点吗？

Answer 1

使用Linear gradient

要使背景变暗，请参阅此 codepen还有这个link

<div class="bg-img"></div>

.bg-img {
  width: 100%;
  height: 100%;
  background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
        opacity: .6; 
  }
}