如何在两个不同背景之间放置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; 
}