Html 背景梯度重复问题_Html_Css

Html 背景梯度重复问题

html css

Html 背景梯度重复问题,html,css,Html,Css,我有一个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="

我有一个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>


html{
身高：100%；
背景色：#366fcd；}
身体{
保证金：0；
身高：100%；
宽度：100%；
背景色：#366fcd；
背景：-莫兹线性梯度（中心顶部，#316494 0%，#366fcd 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#316494）、颜色停止（1，#366fcd））；
背景重复：重复-x；
}
div#TheElement{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：#fff；
左：2000px；
顶部：2000px；
}

当你向下滚动时，渐变会变成纯色（#366fcd），但当你向右滚动时，渐变会停止，你也会看到纯色

如果我删除背景色：#366fcd；}从html元素开始，然后渐变按预期沿x轴重复，但向下滚动时，渐变停止并显示白色

我知道我总是可以求助于使用背景图像，但我更愿意让CSS工作

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

安东尼

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

background-attachment:fixed;
height:100%;

看看我的例子

以下是您的示例：

我删除了

背景重复

属性，并将颜色更改为更直观的颜色

如果要滚动背景，则需要将背景附件设置为滚动。仅当您的内容很高时才会滚动，因此在示例中，我将body标记

height

设置为

3000px

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


html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；}
html{
背景：红色-莫兹线性梯度（中间顶部，#316494 0%，红色100%）重复-x；
背景：红色-webkit渐变（线性，左上，左下，颜色停止（0，#316494），颜色停止（1，红色））重复-x；
}
div#TheElement{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：#fff；
左：2000px；
顶部：2000px；
边框：1px实心#000；
}

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

您的固定JSBin示例在Mac上的Chrome 13中似乎不起作用。当我向右滚动时，渐变背景仍然消失。我修正了这一点，这是因为OP seted css for html标记。@Mohsen-看起来不错，但现在背景渐变不滚动，保持静态。可能可以作为解决方案，但无法修复确切的示例。请阅读我在后台附件中链接的文档。此属性也有一个滚动值。如果您将其设置为滚动，它将滚动。你需要一个高大的身体才能看到效果。因此，您可以向主体添加非常高的高度，或在主体上插入内容以查看效果。看看这个例子：