html背景消除重复,html – CSS背景渐变重复问题

我有一个需要扩展宽度和高度的html页面,所以需要能够上下左右滚动,但是我似乎无法使css渐变重复-x并向下留下纯色.

剥离代码：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

html {

height: 100%;

background-color: #366fcd; }

body {

margin: 0;

height: 100%;

width: 100%;

background-color: #366fcd;

background: -moz-linear-gradient(center top,#316494 0%,#366fcd 100%);

background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#316494),color-stop(1,#366fcd));

background-repeat: repeat-x;

}

div#TheElement {

position: absolute;

width: 100px;

height: 100px;

background-color: #fff;

left: 2000px;

top: 2000px;

}

当您向下滚动时,这会将渐变运行为纯色(#366fcd),但是当您向右滚动时,渐变会停止,您也会看到纯色. See example.

如果我删除背景颜色：#366fcd;从html元素开始,然后渐变沿着x轴重复,但是当你向下滚动时,渐变停止并出现白色. See example.

我知道我总是可以使用背景图像,但更喜欢让CSS工作.

哦,是的,这是在OSX Lion的Chrome和FF上测试的.

安东尼