我看了几篇关于此的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,或者我在这里错过了一些东西。没有显示用于着色的较深背景。有指针吗?

最佳答案

#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;
}
<div class="header">
    <div class="overlay">
        <div class="jumbotron" id="header1">
            <h1>Hello</h1>
        </div>
    </div>
</div>


按照预期,h1充当了额外的可视层,其填充覆盖了#header1。

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

还有另一种可能的解决方案(类似于第二种方法),您可以添加背景图像进行叠加,并具有我在#header1或.jumbotron中给出的示例中的h1样式

除了第一个解决方案之外,您还应该能够通过添加background-color:来添加额外的图层。我不确定它会如何精确地影响背景,但是从我的猜测来看,它应该只会增加一层颜色。

这是我使用此技术的一个个人示例。

Example

关于html - 向背景图像添加深色覆盖,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34702477/

10-12 12:36
查看更多