CSS背景渐变重复问题 [英] CSS Background Gradient Repeat Issue
问题描述
我有一个html页面需要扩展宽度和高度，所以需要能够上下左右滚动，但我似乎不能得到css渐变重复x和留下一个坚实的
I have a html page that needs to expand width and height, so needs to be able to scroll up and down and left and right, however I can't seem to get the css gradient to repeat-x and leave a solid colour downwards.
缩减代码：
<!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）右边，渐变停止，你也看到纯色。 查看示例。
This runs the gradient into a solid colour (#366fcd) when you scroll down, but when you scroll right, the gradient stops and you see the solid colour there too. See example.
如果我删除 background-color：＃366fcd; } 从 html 元素，然后渐变沿x轴按预期重复，但当您向下滚动时，渐变停止，并出现白色。 查看示例。
If I remove the background-color: #366fcd; } from the html element, then the gradient repeats along the x-axis as expected, but when you scroll down, the gradient stops and white appears. See example.
我知道我总是可以
是的，这是在OSX Lion的Chrome和FF上测试的。
Oh yeah, this is tested in Chrome and FF on OSX Lion.
Anthony
推荐答案
您需要的是 background-attachment 属性。有了这个属性，你可以固定的身体的背景，而你的身体完全填充屏幕高度。
All you need is background-attachment property. With this property you can fix the background of the body while your body is filling screen height completely.
background-attachment:fixed;
height:100%;
看看我的例子
http://jsfiddle.net/mohsen/TanzY/
这是您修改的示例： http://jsbin.com/ileqid/4
我移除了
I removed background-repeat property and also changed colors to be more visual.
如果你想要你的背景滚动，那么你需要设置 background-attachment 到滚动。滚动只会发生，如果你有一个高的内容，所以在这个例子我设置的身体标记 height 到 3000px 。
If you want your background scrolls then you need to set the background-attachment to scroll. Scroll only happens if you have a tall content so in this example I set the body tag height to 3000px.
这篇关于CSS背景渐变重复问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
