插入HTML正文的多個背景圖像

我試圖插入3個不同的圖像作爲我的html頁面的背景。我知道如何插入一張圖片作爲我的頁面背景，但我想將背景分成三個網格。插入HTML正文的多個背景圖像

基本上，我想要有兩列6個單位（col-sm-6）作爲背景。在前6個單元中，我想要一個背景圖像。在6個單元的右側，我想進一步將它分成兩個相同的大小，以適應2個不同的背景圖像。這是我想達到的目標：

我怎麼能去這樣做呢？我想讓這些圖像覆蓋我的頁面的整個長度和寬度。

2016-04-03 Adam

這裏是簡單的演示。

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

來源

2016-04-04 06:10:27

謝謝。這很好，很簡單。 – Adam

歡迎隊友！ :) –

有幾種方法可以解決您試圖實現的目標。首先想到的是有兩個div，一個用於背景網格，另一個用於前景中的所有內容。

背景網格將有position: fixed並使用Bootstrap來佈局網格，如您所述。前景可能有position: absolute; top: 0%;。然後將所有頁面內容放置在前景div內。

查看codepen以瞭解如何設置此示例。 http://codepen.io/smrubin/pen/yOzWrR

可能不是最好的方法，但這應該至少讓你開始朝正確的方向。

來源

2016-04-04 00:51:12 smrubin

謝謝您的幫助！這工作非常好。但我只接受其他答案，因爲它的簡單性。 – Adam

沒問題。值得注意的是，在另一種解決方案中，前景被限制爲與背景相同的佈局（它必須位於兩列中，一列具有拆分行網格）。我的解決方案允許您根據需要流動前景內容。另外值得注意的是，對於其他解決方案，如果內容超過最小高度屬性，那麼您的兩列將不再具有相同的高度。你可以在這個codepen中看到這個，它只是增加了更多的內容給div。 http://codepen.io/anon/pen/EKboQv – smrubin

插入HTML正文的多個背景圖像

回答

相關問題