用另一张图片遮盖身体背景

Question

我正在尝试用另一张图片遮盖html正文背景图片。 我使用了z-index，但无法正常工作。 我错过了什么还是只是不明白我在做什么。

请参见下面的示例代码：

 body, html { margin: 0; /* The image used */ background-image: url('http://lorempixel.com/output/nature-qc-1176-907-10.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #main-content { background-image: url('http://lorempixel.com/output/food-qc-640-633-1.jpg'); z-index: 10; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .content { /*height: 700px;*/ height: 100vh; background:rgba(255,255,255,0.5); /*margin-top: 20%;*/ } 

 <div id="main-content"> <div class="content">something in here..</div> <div class="content">something in here..</div> <div class="content">something in here..</div> </div> 

另外， main-content是具有100vh和background opacity div

主要内容图片应位于所有content顶部，包括具有背景不透明度的content div。

Answer 1

在#main-content上使用100%宽度和高度，例如：

#main-content {
  width: 100%;
  height: 100%;
}

看看下面的代码片段：

 body, html { margin: 0; /* The image used */ background-image: url('http://lorempixel.com/output/nature-qc-1176-907-10.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #main-content { background-image: url('http://placehold.it/500x500'); z-index: 10; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; width: 100%; height: 100%; } 

 <div id="main-content"></div> 

希望这可以帮助！

Answer 2

如果您使用CSS定义div的高度，它将起作用。 或插入内容，使其垂直扩展。

背景图片对于包含更多内容的元素有意义，否则您可以使用<img>插入图片

Answer 3

您的意思如下，如果是这样，则设置#main-content height:auto ，它可以正常工作，如果您将height:100%设置为100vh ，则在滚动条上会隐藏放在顶部的图像，因此请尝试以下操作。

因此，现在#main-content height:auto计算并获取分配给其中存在的子元素的高度，并且分配给该div的背景图片#main-content仅在高度为100vh时才可见，之后默认图像为分配给身体变得可见。

 body, html { margin: 0; background-image: url('http://lorempixel.com/output/nature-qc-1176-907-10.jpg'); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #main-content { background-image: url('http://placehold.it/500x500'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; width:100%; height:auto; } .content { height: 100vh; background:rgba(220,60,60,0.6); color:#fff; } 

 <div id="main-content"> <div id="main-content"> <div class="content">something in here..</div> <div class="content">something in here..</div> <div class="content">something in here..</div> </div> </div>