CSS 背景渐变重复问题
[英]CSS Background Gradient Repeat Issue
问题描述
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.
我有一个需要扩展宽度和高度的 html 页面，因此需要能够上下左右滚动，但是我似乎无法让 css 渐变重复-x 并向下留下纯色。
Stripped down code:精简代码：
<!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>
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.当您向下滚动时，这会将渐变运行为纯色 (#366fcd)，但是当您向右滚动时，渐变停止并且您也会在那里看到纯色。 See example .参见示例。
If I remove the background-color: #366fcd;如果我删除背景颜色：#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. }从HTML元素，那么沿x轴的梯度重复如预期的，但在向下滚动时，梯度停止和白色出现。 See example .参见示例。
I know I could always resort to using a background image, but would prefer to get the CSS working.我知道我总是可以使用背景图像，但更愿意让 CSS 工作。
Oh yeah, this is tested in Chrome and FF on OSX Lion.哦，是的，这是在 OSX Lion 上的 Chrome 和 FF 中测试的。
Anthony安东尼
2 个解决方案
解决方案1
27 已采纳 2011-09-15 07:51:41
All you need is background-attachment property.您所需要的只是background-attachment属性。 With this property you can fix the background of the body while your body is filling screen height completely.使用此属性，您可以在您的身体完全填充屏幕高度时修复身体的背景。
background-attachment:fixed;
height:100%;
Look at my example here http://jsfiddle.net/mohsen/TanzY/看看我这里的例子http://jsfiddle.net/mohsen/TanzY/
Here is your example fixed: http://jsbin.com/ileqid/4这是您修复的示例： http : //jsbin.com/ileqid/4
I removed background-repeat property and also changed colors to be more visual.我删除了background-repeat属性并更改了颜色以使其更加直观。
If you want your background scrolls then you need to set the background-attachment to scroll .如果您希望背景滚动，则需要the background-attachment设置为scroll 。 Scroll only happens if you have a tall content so in this example I set the body tag height to 3000px .只有当你有一个高的内容时才会滚动，所以在这个例子中我将 body 标签的height设置为3000px 。
解决方案2
2 2011-09-15 08:26:47
Apply your gradients to the html tag.将渐变应用于 html 标签。
<!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, body {
width:100%;
height:100%;
margin:0;
padding:0;}
html {
background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x;
background:red -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x;
}
div#TheElement {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
left: 2000px;
top: 2000px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="TheElement">
</div>
</body>
</html>
Tested in FF6, Chrome 13 and Safari 5.在 FF6、Chrome 13 和 Safari 5 中测试。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.