css - 无法仅使用 css 获得垂直渐变

Question

我在做这个

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 上测试它，问题是渐变是针对 div 而不是针对 body 重复的，当我尝试进行水平渐变时它工作得很好。

有什么建议吗？

Answer 1

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，人们可以使用图像或者甚至懒得去支持它。