0

コンテンツエリアの背景に紙の画像を使用したウェブページをデザインしています。本体には独自の背景画像があります。紙はページの上部から始めて、長さに関係なく下部まで繰り返す必要があります。

ここに問題があります：

紙の上部をdivの上部に配置し、その下の紙の繰り返し部分をページの垂直方向に繰り返して、通常の上部の1枚の巨大な紙に錯覚を作成する必要があります。コンテンツを分割できないため、これを1つのdivで（理想的には）発生させる必要があります。私はウェブ、特にCSS3サイトを梳き続けてきました。divごとに複数の背景画像などを設定できることは知っていますが、2番目の繰り返し画像が始まるピクセル位置を指定することはできないと思います。すでにPhotoshopでシームレスな垂直方向に繰り返される画像を作成しました。

ところで、必要に応じてバスの下にIE8以下を投げるつもりです。

私が今までにあなたに「ビジュアル」を与えていなかったら、これを想像してください。ノートブックから一枚の紙をはがします。紙の上部はページの上部にありますが、下部は表示されません。ページが長くなるにつれて、ページの中央がどんどん表示されます。

ありがとう。

ここにいくつかの擬似コードがあります：

<!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>

私が書きたい「紙」クラスの背景（それを見るにはスクロールする必要があるかもしれません）。例：ページの先頭から100ピクセルで開始し、垂直方向に繰り返します。

編集

ピーターの助けを借りてそれを動作させました。コンテンツdiv内でのポジショニングに問題が発生し、戻ってきて私を悩ませるかどうかはわかりません。しかし、今はそのままで動作します。ありがとう、ピーター。

JSFiddle

すべての地獄が壊れたように見える場合は、2つのdivを使用してロゴを分割するか、配置を指定する必要があります...

4

1 に答える 1

1

コンテンツを分割しないことを主張する場合、私は次のようなことをします：http: //jsfiddle.net/ntWTE/

私はクロスブラウザサイトを作成することに慣れているので、css3マルチバックグラウンドオプションを使用しませんでした、そしてサポートはまだ注がれています。異なる背景画像を含めるために2つの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 に答える