CSS背景渐变重复问题

Question

CSS背景渐变重复问题

11

我有一个需要在宽度和高度上展开以便能够垂直和水平滚动的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)，但是当你向右滚动时，渐变会停止，你也会看到那个实心颜色。查看示例。

如果我从html元素中删除background-color: #366fcd; }，那么渐变就会沿着x轴重复，但是当你向下滚动时，渐变会停止，白色会出现。查看示例。

我知道我可以始终采用背景图像，但更喜欢让CSS工作。

哦，是的，这在OSX Lion上的Chrome和FF上进行了测试。

安东尼

- littlecharva

2个回答

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>

在火狐6、Chrome 13和Safari 5中测试通过。

- easwee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohsen · Accepted Answer

您所需的是 background-attachment 属性。使用此属性，您可以在页面占满整个屏幕高度时固定 body 的背景。

background-attachment:fixed;
height:100%;

看看这个例子： http://jsfiddle.net/mohsen/TanzY/

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

我删除了background-repeat属性，并且将颜色更改为更具视觉效果。

如果您想要背景滚动，则需要将background-attachment设置为scroll。只有在内容很高时才会发生滚动，因此在此示例中，我将body标签的height设置为3000px。