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

html - 插入HTML正文的多个背景图像,第1张

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

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

html - 插入HTML正文的多个背景图像,enter image description here,第2张

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

最佳答案:

2 个答案:

答案 0 :(得分:1)

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

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

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

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

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

答案 1 :(得分: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;}
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复