1

トップバー、コンテンツバックグラウンド、ボトムバーの3つの画像からコンテンツの背景を組み合わせたシンプルなウェブサイトを作ろうとしています。

問題は、コンテンツの背景が上部と下部のバーの下に表示されることです。透明度が必要です。 ここに画像の説明を入力してください

BG CSSを追加する前後：

background-image: url('content-top.png'), url('content-bottom.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;

。

background-image: url('content-top.png'), url('content-bottom.png'), url('content-body.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: left top, left bottom, left center;

どうすればこれを解決できますか？

編集：CSS3で同じ効果を作成し、問題を解決しました：

background-color: #d9daca;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px #8a8977 solid;
4

1 に答える 1

2

画像を使用している場合の最も簡単な方法は、コンテナー内の各画像の div を作成し、css プロパティを介して背景を制御するか、画像を div にドロップすることです。あなたが抱えている問題は、1つのdivがあるため、上の画像が背景画像と重なっているということです. それを分割すると、問題がソートされます。次に例を示します。

<div id="wrapper">
    <div id="top"></div>
    <div id="middle">
        <!-- Content in here -->
    </div>
    <div id="bottom"></div>
</div>

そうすれば、すべての div がラッパー内に保持されます。float: left !important; を適用する必要がある場合があります。それらを適切に並べるのに問題がある場合は、いくつかの div に。しかし、これは私がしていることであり、完全に機能します:)

アンディ

于 2012-06-24T10:12:54.007 に答える