我试图让这个渐变出现在文档的整个主体上,但它只显示在顶部。无论如何要把它填满整个身体吗?我正在使用Firefox,如果这有所不同。
body {
height: 100%;
background-image: linear-gradient(to top, blue 80%, green 0);
}
答案 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自动生成渐变。
答案 1 :(得分:0)
以下是确保获得线性渐变的正确代码。
html {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(0deg ,white, orange);
}
此方法适用于几乎所有现代浏览器。希望这有帮助。