2011-12-23 42 views
0

我這樣做不能使用CSS來獲得垂直梯度只有

body{ 

background: -webkit-gradient(linear,left top, left bottom, from(#FAFAFA), to(#D8D8D8)); 

} 

<div class="container"> 
    <div cass="row"> 
     <div class = "eight columns"> <p> I am in eight column</p></div> 
     <div class = "four columns"> <p> I am in four column</p></div> 
    </div> 

    <div class="row"> 
     <div class ="twelve columns"> <p class="centered">I am in 12 column </p></div> 
    </div> 

</div> 

我在Chrome測試它,但問題是,梯度是越來越重複的股利而不是身體,當我試圖做水平漸變它工作得很好。

有什麼建議嗎?

回答

0
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECF4FF), to(#62A9FF)); 
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */ 
    background-image: -webkit-linear-gradient(top, #ECF4FF, #62A9FF); 
    /* Firefox 3.6+ */ 
    background-image: -moz-linear-gradient(top, #ECF4FF, #62A9FF); 
    /* IE 10+ */ 
    background-image: -ms-linear-gradient(top, #ECF4FF, #62A9FF); 
    /* Opera 11.10+ */ 
    background-image: -o-linear-gradient(top, #ECF4FF, #62A9FF); 

對於IE < 9可以使用圖像或甚至不打擾來支持它。