Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

也许我不理解如何使用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; 
  }
}

Answer 2

＆＃13;

#header1 {
    background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
    
    
    background-size: cover;
 
  
}

h1 {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding-top: 10px;
    padding-bottom: 100px;
    padding-left: 20px;
  padding-right: 20px;
}

＆＃13;

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

＆＃13;

按照预期，h1充当额外的可视图层，其填充覆盖＃header1。

第二个解决方案是将原始背景图像添加到.header中，并将h1中的样式赋予#overlay，并进行一些调整，这也应该可以解决问题。

还有另一个可能的解决方案（类似于第二个）你可以将背景图像添加到叠加层，并从我给＃header1或.jumbotron

的示例中获得h1样式

除了第一个解决方案之外，您还应该可以通过添加背景颜色来添加额外的图层来覆盖。我不确定它会如何影响背景，但我猜测它应该只添加一层额外的颜色。

以下是我使用此技术的个人示例。

Example

Answer 3

z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。您的答案可以访问css-tricks

Answer 4

我想你想要完全隐藏背景图像，然后你需要在rgba（0,0,0,1）

中将alpha的值设置为1

0.7定义了您需要显示特定元素的透明度级别。

下面的链接解释了覆盖非常好的例子的概念

http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

为背景图像添加深色叠加层

4 个答案: