用另一張圖片遮蓋身體背景

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>