如何在兩個不同背景之間放置div

Question

我想在兩個不同背景之間放置div。 它看起來像下面的圖片：

正如你可以看到，在div放置在兩個背景，白色和藍色之間。

我該如何做到這一點？

Answer 1

您可以使用position:absolute和你在中間

檢查要this

Answer 2

您可以通過應用該div來使用以下代碼。在此代碼中，您可以使用兩種不同的顏色來背景。

background: linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%); 
background: -o-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%); 
background: -moz-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%); 
background: -webkit-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%); 
background: -ms-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%); 

在上面的代碼中不刪除任何單行，因爲每一行是爲瀏覽器兼容性，每行代碼爲不同的瀏覽器。

Answer 3

你可以定位你的白色div，使它堆疊在藍色和白色背景的div頂部。

https://jsfiddle.net/z6ohochn/

#blue { 
    background: blue; 
    width:100%; 
    height:60px; 
} 
#white { 
    width:80%;a 
    height:50px; 
    background:white; 
    z-index:2; 
    position:relative; 
    top:-80px; 
    left:10%; 
    border-radius:5px; 
} 
#gray { 
    background: gray; 
    width:100%; 
    height:60px; 
}