固定頂部圖像+垂直重複其餘部分

我正在設計一個網頁，其中有紙張圖像作爲內容區域的背景。身體將擁有自己的背景圖像。文件需要從頁面的頂部開始，並且一直重複到底部，無論長度如何。固定頂部圖像+垂直重複其餘部分

這裏的問題：

我需要有紙的頂部在div的頂部，然後它下面的垂直重複上下頁紙張的重複部分，在一個巨大的創造的幻覺正常頂部的一張紙。我需要在一個div中（理想情況下）發生這種情況，因爲我無法分割內容。我一直在梳理網頁，特別是CSS3網站。我知道每個div可以有多個背景圖片等，但我不認爲您可以指定第二個重複圖片開始的像素位置。我已經在Photoshop中創建了無縫，垂直重複的圖像。

順便說一句，如果有必要，我願意在公交車下面放8個及以下的公共汽車。

如果我現在還沒有給你一個「視覺」，想象一下。您從筆記本中撕下一張紙，紙的頂部位於頁面的頂部，但您從未看到底部。隨着頁面變長，您只會看到越來越多的頁面中心。

謝謝。

下面是一些僞代碼：

<!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和分裂的標誌，或給它一些定位...

來源

2012-12-10 keyboardSmasher

你能提供一些（簡化的）代碼嗎？也許甚至是一個jsfiddle？ – Pevara

@PeterVR我加了一些假冒代碼。 – keyboardSmasher

爲什麼不能有兩個'div'元素？一個用於紙張的「頂部」，另一個用於重複的紙張背景？然後，你不必擔心任何具體的CSS3愚蠢，或JavaScript的欺騙，或任何。 –

如果你堅持不拆分了內容，我會做這樣的事情：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-10 00:49:52 Pevara

這看起來像可以工作。我現在正在我的ipad上睡覺，但明天如果它能正常工作，我會給你打勾的。感謝您的時間，彼得......和其他人一樣:) – keyboardSmasher

謝謝。 :) [jsfiddle]（http://jsfiddle.net/qbzzc/） – keyboardSmasher

固定頂部圖像+垂直重複其餘部分

回答

相關問題