CSS背景渐变重复问题答案

【问题标题】：CSS Background Gradient Repeat IssueCSS背景渐变重复问题
【发布时间】：2011-09-15 07:35:56
【问题描述】：

我有一个需要扩展宽度和高度的 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.

如果我删除 background-color: #366fcd; } 来自 html 元素，然后渐变会按预期沿 x 轴重复，但是当您向下滚动时，渐变会停止并出现白色。 See example.

我知道我总是可以使用背景图片，但更愿意让 CSS 正常工作。

哦，是的，这是在 OSX Lion 上的 Chrome 和 FF 中测试的。

安东尼

【问题讨论】：

标签： html css

【解决方案1】：

您只需要background-attachment 属性。使用此属性，您可以在身体完全填充屏幕高度时修复身体的背景。

background-attachment:fixed;
height:100%;

看我的例子 http://jsfiddle.net/mohsen/TanzY/

这是您的示例修复：http://jsbin.com/ileqid/4

我删除了background-repeat 属性并更改了颜色以更直观。

如果您希望背景滚动，则需要将the background-attachment 设置为scroll。仅当您的内容很高时才会滚动，因此在this 示例中，我将主体标签height 设置为3000px。

【讨论】：

您修复的 JSBin 示例似乎不适用于 Mac 上的 Chrome 13。当我向右滚动时，渐变背景仍然消失。
我修好了，这是因为OP为html标签设置了css。
@Mohsen - 看起来不错，但现在背景渐变不会滚动并保持静态。可能可以作为解决方案，但不能修复确切的样本。
请阅读我在后台附件中链接的文档。这个属性也有一个滚动值。如果您将其设置为滚动，它将滚动。你需要一个高大的身体才能看到效果。所以你可以给body添加一个非常高的高度或者在上面插入内容来看看效果。看这个例子：jsbin.com/ileqid/5

【解决方案2】：

将渐变应用到 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>

在 FF6、Chrome 13 和 Safari 5 中测试。

【讨论】：