0

我有一个 HTML5 页面，其背景为：

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

这工作正常，直到页面变长（15000 像素左右），此时背景在 Firefox 上完全消失。

寻找其他地方为我提供了两种不适用于此的解决方案。他们将使用 html & body height 100% 或 background-attachment:fixed。两者都将渐变高度与视口匹配，而不是文档高度。

这适用于较短的页面，但在较长的页面上会中断 FF。有没有我可以在不重组我的html的情况下使用的CSS技巧？

4

2 回答 2

1

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

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

一旦我指定“不重复”，它将尊重 100%，而不管文档高度变化（无限滚动）。

于 2012-09-28T22:49:10.523 回答
0

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

演示：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/

于 2012-09-21T18:25:52.140 回答