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

时间:2015-03-26 16:39:35

标签: css linear-gradients

我试图让这个渐变出现在文档的整个主体上,但它只显示在顶部。无论如何要把它填满整个身体吗?我正在使用Firefox,如果这有所不同。

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

2 个答案:

答案 0 :(得分:2)

您需要为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

答案 1 :(得分:0)

以下是确保获得线性渐变的正确代码。

html {
  width: 100%;
  height: 100%;
}

body {  
  background-image: linear-gradient(0deg ,white, orange);
}

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