用另一个图像覆盖身体背景

Question

我正在尝试用另一张图片掩盖 html 正文背景图片。我使用了 z-index 但无法正常工作。我是遗漏了什么还是无法理解我在做什么。

参见下面的示例代码：

body, html {
    margin: 0;
    /* The image used */
    background-image: url('http://lorempixel.com/output/nature-q-c-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-q-c-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 的 div 和 background opacity

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

Answer 1

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

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

看看下面的sn-p：

body, html {
    margin: 0;
    /* The image used */
    background-image: url('http://lorempixel.com/output/nature-q-c-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 定义高度，它将起作用。或者插入内容，使其垂直扩展。

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

插入图片

Answer 3

您的意思如下，如果是，则设置#main-content height:auto，它工作正常，如果您设置height:100%，则将其视为100vh，滚动隐藏放置在顶部的图像，所以尝试如下。

所以现在#main-contentheight:auto 计算并获取分配给其中存在的子元素的高度，并且分配给此 div #main-content 的背景图像只能看到直到 100vh 的高度，之后默认图像分配给身体变得可见。

body, html {
    margin: 0;
    background-image: url('http://lorempixel.com/output/nature-q-c-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>