如何在背景中有2個分離的顏色？

Question

這是我想要實現的。我使用bootstrap作爲啓動板，但我無法弄清楚如何使2色背景起作用。我想只使用2名的div和引導電網即：

<div class="row"> 

<div class="col-md-6" id="leftside"> 

</div> 

<div class="col-md-6" id="rightside"> 

</div> 

然而這樣一來，我不能得到H1在坐在中間！任何解決方案對不起，我是初學者。

Answer 1

您可以使用漸變，然後將其用作普通背景。

div{ 
width:100px; 
height:100px; 
background: linear-gradient(to right, 
    #9c9e9f 0%, 
    #9c9e9f 50%, 
    #33ccff 50%, 
    #33ccff 100%); 
} 

的jsfiddle：http://jsfiddle.net/FQ78n/

Answer 2

您不能只使用默認的自舉類（我所知遠）做到這一點。嘗試是這樣的：

<div class="row custom-row"> 

    <h1 class='custom-heading'>Heading</h1> 

    <div class="col-md-6" id="leftside"> 

    </div> 

    <div class="col-md-6" id="rightside"> 

    </div> 

</div> 

與CSS：

.custom-row { 
    position: relative; 
} 

.custom-heading { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
}