Question

我正在设计一个网页，其中包含纸张图像作为内容区域的背景。身体将拥有自己的背景图像。纸张需要从页面顶部开始，无论长度如何，都要一直重复到底部。

问题在于：

我需要将纸张的顶部放在div的顶部，然后将纸张的重复部分垂直向下重复页面，在一张带有正常顶部的大纸上创建幻觉。我需要在一个div（理想情况下）中发生这种情况，因为我无法拆分内容。我一直在梳理网络，特别是CSS3网站。我知道每个div可以有多个背景图像等，但我认为你不能指定第二个重复图像开始的像素位置。我已经在Photoshop中创建了无缝的垂直重复图像。

顺便说一句，如果有必要的话，我愿意在公共汽车下面投入8点及以下的IE。

如果我现在还没有给你一个“视觉”，想象一下。你从一本笔记本上撕下一张纸，纸的顶部在页面的顶部，但你从未看到底部。随着页面变长，您只会看到越来越多的页面中心。

感谢。

这是一些伪代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
    background: url(body-background.gif) repeat scroll left top;
}

.paper {
    margin: auto;
    width: 1170px;
    background: url(paper-top.png) left top no-repeat, url(paper-bottom.png) left 100px repeat-y;
}
</style>
</head>
<body>
<div class="paper">
    <!--content here-->
</div>
</body>
</html>

“纸”类中的背景我想写什么（可能需要滚动才能看到它）。例如：从页面开始处开始100px并垂直重复。

修改的

得到彼得的帮助。我不知道是否会导致内容div中的定位问题并回来困扰我。但它现在可以正常工作。谢谢，彼得。

JSFiddle

如果一切都破了，我将不得不选择两个div并拆分徽标，或给它一些定位......

Answer 1

如果您坚持不拆分内容，我会这样做：http://jsfiddle.net/ntWTE/

我没有使用css3多个背景选项，因为我习惯于制作跨浏览器网站，并且支持仍在倾倒。我刚刚添加了两个div来包含不同的背景图像，并将它们放在内容的后面。也许不是最漂亮的解决方案，但它应该适用于所有浏览器。

.paper {
    margin: auto;
    width: 450px;
    position: relative;
}
.paper-bg {
    background: #cff;    /* the repeating image for the paper */
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.paper-bg-top {
    position: absolute;   
    background: #ccf;  /* the top image for the paper */
    top: 0;
    left: 0;
    height: 100px; 
    width: 100%;    
}
.paper-content {
    position: relative;
    z-index: 5;    
}

固定顶部图像+垂直重复的余数

1 个答案: