我有一个需要扩展宽度和高度的html页面,所以需要能够上下左右滚动,但是我似乎无法使css渐变重复-x并向下留下纯色.
剥离代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
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;
}
</style>
</head>
<body>
<div id="TheElement">
</div>
</body>
</html>
当您向下滚动时,这会将渐变运行为纯色(#366fcd),但是当您向右滚动时,渐变会停止,您也会看到纯色. See example.
如果我删除背景颜色：#366fcd;从html元素开始,然后渐变沿着x轴重复,但是当你向下滚动时,渐变停止并出现白色. See example.
我知道我总是可以使用背景图像,但更喜欢让CSS工作.
哦,是的,这是在OSX Lion的Chrome和FF上测试的.
安东尼
解决方法
您所需要的只是
background-attachment物业.使用此属性,您可以在身体完全填充屏幕高度时修复身体的背景.
background-attachment:fixed; height:100%;
看看我的例子
http://jsfiddle.net/mohsen/TanzY/
以下是您修复的示例：http://jsbin.com/ileqid/4
如果您想要背景滚动,则需要设置背景附件以滚动.滚动仅在内容较高时才会发生,因此在this示例中,我将body标签高度设置为3000px.
