0

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

这是问题所在：

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

顺便说一句，如果有必要，我愿意将 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 并拆分徽标，或者给它一些定位...

4

1 回答 1

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;    
}
于 2012-12-10T00:49:52.203 回答