插入HTML正文的多个背景图像

Question

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

基本上，我希望有两列6个单位（col-sm-6）作为背景。在前6个单位，我想要一个背景图像。在6个单元的右侧，我想进一步将它分成两个相同的尺寸，以适应2个不同的背景图像。这就是我想要实现的目标：

我该怎么做呢？我想让图片覆盖我页面的整个长度和宽度。

Answer 1

有几种方法可以实现您尝试实现的目标。我想到的第一件事就是有两个div，一个用于背景网格，一个用于前景中的所有内容。

背景网格将有position: fixed并使用Bootstrap按照您的描述布局网格。

前景可能有position: absolute; top: 0%;。然后将所有页面内容放在前景div中。

查看codepen以获取如何进行设置的示例。 http://codepen.io/smrubin/pen/yOzWrR

可能不是最好的方法，但至少应该让你开始朝着正确的方向前进。

Answer 2

这是简单的演示。

<强> 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;}