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

【问题标题】：Not able to get a vertical gradient using css only仅使用 css 无法获得垂直渐变
【发布时间】：2011-12-23 09:56:36
【问题描述】：

我正在这样做

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 上，当我尝试做水平渐变时它工作得很好。

有什么建议吗？

【问题讨论】：

标签： css gradient

【解决方案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);

对于

【讨论】：