CSS背景渐变重复问题

Question

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="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>

Run Code Online (Sandbox Code Playgroud)

当您向下滚动时,这会将渐变运行为纯色(#366fcd),但是当您向右滚动时,渐变会停止,您也会看到纯色. 见例子.

如果我删除背景颜色:#366fcd; }从HTML元素,那么沿x轴的梯度重复如预期的,但在向下滚动时,梯度停止和白色出现. 见例子.

我知道我总是可以使用背景图像,但更喜欢让CSS工作.

哦,是的,这是在OSX Lion的Chrome和FF上测试的.

安东尼

Answer 1

Moh*_*sen 22

所有你需要的是background-attachment财产.使用此属性,您可以在身体完全填满屏幕高度时修复身体的背景.

background-attachment:fixed;
height:100%;

Run Code Online (Sandbox Code Playgroud)

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

以下是您修复的示例:http://jsbin.com/ileqid/4

我删除了background-repeat属性,也改变了颜色以更加直观.

如果你想要你的背景滚动,那么你需要设置the background-attachment为scroll.滚动仅在您拥有较高内容时才会发生,因此在此示例中我将body标记设置height为3000px.

@Mohsen - 看起来不错,但现在背景渐变不会滚动并保持静止.可以作为解决方案,但不能修复确切的样本. (2认同)

归档时间：	14 年，3 月前
查看次数：	14388 次
最近记录：	6 年，1 月前