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);
}

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

Css将线性渐变应用于文档正文

2 个答案: