html - 插入 HTML body 的多个背景图片

Question

我想插入 3 个不同的图像作为我的 html 页面的背景。我知道如何插入一张图片作为我页面的背景，但我想将背景分成三个网格。

基本上，我想为背景设置两列 6 个单元 (col-sm-6)。在前 6 个单元上，我想要一个背景图像。在 6 个单元的右侧，我想将其进一步分成两个大小相等的单元以适合 2 个不同的背景图像。这是我想要实现的目标:

我该怎么做呢？我希望图像能够覆盖我页面的整个长度和宽度。

Answer 1

这是简单的演示。

HTML

<div class="row">
  <div class="col-sm-6 div1">
      " your content goes here"  
  </div>
  <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-12 div2">
                " your content goes here" 
            </div>
            <div class="col-xs-12 div3">
                " your content goes here" 
            </div>
        </div>
  </div>
</div>

CSS

.div1 { min-height:500px; background-image: url(https://images.unsplash.com/photo-1449960238630-7e720e630019?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;}
.div2 { min-height:250px; background-image: url(https://images.unsplash.com/photo-1453227588063-bb302b62f50b?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;}
.div3 { min-height:250px; background-image: url(https://images.unsplash.com/photo-1433878455169-4698e60005b1?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;}