Question

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

安东尼

Answer 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。

Answer 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中测试。

CSS背景渐变重复问题

2 个答案: