Question

我有一个背景为：

的HTML5页面

background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);

这很好用，直到页面变长（15000px左右），此时背景完全消失在Firefox上。

寻找其他地方为我提供了两个不适用于此的解决方案。他们使用的是html＆amp;身高100％，或背景附件：固定。两者都将渐变高度与视口匹配，而不是文档高度。

这适用于较短的页面，但在较长的页面上会中断FF。有没有我可以使用的CSS技巧而不重构我的HTML？

Answer 1

在我的情况下，之前的答案没有解决它，但我找到了一个解决方案：

    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%) no-repeat;

一旦我指定了“不重复”，无论文档高度如何变化（无限滚动），它都会尊重100％。

Answer 2

尝试在HTML节点上指定min-height：

演示：http://jsfiddle.net/SO_AMK/76cyn/

CSS：

html {
    min-height: 100%;
}

body {
    background: radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -o-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
}

或者，如果你想要一个固定的背景：http://jsfiddle.net/SO_AMK/76cyn/1/

CSS3 Firefox径向渐变消失

2 个答案: