Css将线性梯度应用于文档正文

Question

我试图让这个渐变显示在整个文档主体上，但它只显示在顶部。有没有办法把它装满全身？如果有区别的话，我会使用firefox。

body {
        height: 100%;
        background-image: linear-gradient(to top, blue 80%, green 0);
    }

Answer 1

您需要为html和body标记定义100%的高度：

html,
body {
  height:100%;
}

body {
  background:#BAF7C8;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #BAF7C8),
    color-stop(1, #5C93DB)
  );
  background-image: -o-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: -moz-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: -webkit-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: -ms-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: linear-gradient(to top, #BAF7C8 0%, #5C93DB 100%);
}

（css3factory生成的梯度）。

请注意，还有一个常规的背景颜色回退。

您可以使用autoprefixer自动生成渐变。

JSFiddle

Answer 2

以下是确保获得线性梯度的正确代码。

html {
  width: 100%;
  height: 100%;
}
body {  
  background-image: linear-gradient(0deg ,white, orange);
}

这种方法适用于几乎所有的现代浏览器。希望这能有所帮助。