CSS/Html：從divs分離背景

我正在嘗試構建一個包含兩個部分但三個背景的網頁。CSS/Html：從divs分離背景

第一部分是頁眉，它有自己的背景。

第二部分我遇到了問題。它是內容的一部分，它由「頂部」背景和「身體」背景組成。頂部背景是單個圖像，主體背景是另一個圖像，重複自身（平鋪）到頁面末尾。

問題是，頂部和正文之間的區分，僅限於背景。內容是連續的，相同的圖像從頂部開始，並繼續到身體部位。

本來，我嘗試使用：

<div class="header">...</div> 
<div class="content-top">...</div> 
<div class="content-body">...</div>

但問題是，那麼我無法忍受的東西，將跨越兩個.content-top DIV和.content-body股利。如果我在.content-top div中放置較大的組件，它將會推下.content-body div，包括背景，在中間留下一個洞。

這怎麼辦？

編輯：這是一個小提琴證明我的問題 - https://jsfiddle.net/nj13ktms/6/

來源

2017-03-05 tbkn23

請您可以共享小提琴？ –

https://jsfiddle.net/nj13ktms/6/ – tbkn23

您可以使用在同一容器中兩個背景：

.content-top { 
    text-align: center; 
    background: url(http://i.imgur.com/VcvKC2F.jpg) no-repeat center top, url(http://i.imgur.com/FLEHfrY.jpg) repeat-y center; 
    background-size: 100% auto; 
}

https://jsfiddle.net/x3nqry4x/

（注：我刪除了第二次DIV，並把它的內容到第一個）

來源

2017-03-05 14:09:31 Johannes

謝謝！不知道你可以有兩個背景。 – tbkn23

使用 '背景圖片'

.section { 
 
position:relative; 
 
width:100%; 
 
height:100px; 
 
} 
 

 
.top { 
 
background-image: url("https://www.newton.ac.uk/files/covers/968361.jpg"); 
 
} 
 

 
.middle { 
 
background-image: url("http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg"); 
 
} 
 

 
.bottom { 
 
background-image: url("http://www.chainimage.com/images/random-animals-animals-photo-8676039-fanpop.jpg"); 
 
}

<div class="section top"></div> 
 
<div class="section middle"></div> 
 
<div class="section bottom"></div>

來源

2017-03-05 11:35:22

這不是問題，我知道如何創建3個背景的3個部分。我需要的是創建2個具有3個背景的部分，以便背景與部分分開。 – tbkn23

你真的應該編輯你的問題。這是你想要的嗎？ https://www.w3schools.com/css/css3_backgrounds.asp –

CSS/Html：從divs分離背景

回答

相關問題