CSS 在 div 中两个堆叠的背景图像，100% 宽度 50% 高度

Question

我想显示两个具有不同背景图像的 div，如演示图像所示，它们相互堆叠。我如何使用 CSS 定位这些图像，以便每个图像都是页面宽度的 100% 而页面高度的 50%？

到目前为止，我尝试过的每一种方法都会自动切掉每张图片的大部分，或者我被困在使用我不想做的固定尺寸(理想情况下，无论屏幕尺寸如何，这种缩放都很好)

尝试 1:

.home_image_one {
    background: url("party3a.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height:50%;
  width:100%;
}

.home_image_two {
    background: url("party2a.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height:50%;
  width:100%;
  top:50%;
}

HTML:

<section class="row home_images">
        <div class="home_image_one">
        </div>
        <div class="home_image_two">
        </div>
</section>

Answer 1

你可以使用 position: absolute; 实现你想要的东西:

JS Fiddle

header {
    height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
    background: blue;
}

/* 
Set the starting top position of the wrapper 
to equal the header of the header and the bottom
as 0.
*/
.home_images {
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 100%;
}
/* Make each of the children 50% height of the wrap */
.home_image_one {
    background: url("http://www.nasa.gov/centers/goddard/images/content/638831main_globe_east_2048.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height:50%;
    width:100%;
}
.home_image_two {
    background: url("https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height:50%;
    width:100%;
    top:50%;
}

如果您希望页面下方有内容，请将所有内容包装在一个 div 中并给 div position: realtive;:

JS Fiddle - Wrapped