0

次のコードは、通常、.gifまたはjpg画像を使用している場合にうまく機能します。

#contentBox1{ position:relative; width:980px; background:url(../images/bg-middle.png) repeat-y; min-height:80px;   }
#contentBox2{ position:relative; width:980px; background:url(../images/bg-top.png) no-repeat top; }
#contentBox3{ position:relative; width:980px; background:url(../images/bg-bottom.png) no-repeat bottom; min-height:500px; }

<div id="contentBox1"> <div id="contentBox2"> <div id="contentBox3">  Content Text Goes Here. </div> </div> </div>

しかし、ご覧のとおり、背景を見通すにはすべてが透明である必要があるため、.pngを使用します。したがって、「middle.png」の背景はヘッダーとフッターの後ろに表示されます。このdivの上部と下部にできるすべての部屋が必要ですが、これを機能させるための最適なcssコードを見つける方法がわかりません。

例

4

3 に答える 3

1

あなたはこれを試すことができます：

  1. top + middle 画像を1つの画像に結合し、中央のセクションを非常に長くします。
  2. background imageそれをdivのとして配置します。
  3. 上記のdivの内側にdiv、下の画像を背景画像としてこのdivの下部に揃えて2番目の画像を配置します。下の画像を透明ではなく、雲の周りを黄色で塗りつぶしbg colourます。
于 2012-07-23T09:52:03.373 に答える
0

これを試して、次のようにdivを並べ替えます

<body>
<div id="contentBox2"></div>
<div id="contentBox1">
      <div id="content">Content Goes Here</div>
</div>
<div id="contentBox3"></div>
</body>

次に、CSSを次のように変更します。これはより論理的なレイアウトであり、わかりやすいはずです。内部の#content divはテキストにパディングを追加して、画像内に表示されるようにします。上部と下部のdivの最小の高さは画像の高さに設定されているため、背景色が浸透することはありません。＃ContentBox1の最小の高さを希望のサイズに変更できます。

#contentBox2 {
    background: url("images/bg-top.png") no-repeat scroll center top transparent;
    margin: 0 auto;
    min-height: 304px;
    position: relative;
    width: 980px;
}

#contentBox1 {
    background: url("images/bg-middle.png") repeat-y scroll 0 0 transparent;
    margin: 0 auto;
    min-height: 560px;
    position: relative;
    width: 980px;
}

#contentBox3 {
    background: url("images/bg-bottom.png") no-repeat scroll center bottom transparent;
    margin: 0 auto;
    min-height: 240px;
    position: relative;
    width: 980px;
}

#content {
    padding: 40px;
}

お役に立てれば

于 2012-07-23T10:01:23.233 に答える
0

ビリーズの提案を少し使用しましたが、少し変更しました。制限は、最大の高さがあることです。

#contentBox1{ position:relative; width:980px; background:url(images/bg-top.png) repeat-y top left; min-height:300px;  margin:0 auto;   }
#contentBox3{ position:absolute; bottom:-218px; width:980px; height:218px;  background:url(images/bg-bottom.png) no-repeat left bottom;  }  /* bg image is 240px; */
#content{ width:900px; position:relative; margin:0 auto; padding-top:85px;}

<div id="contentBox1">   <div id="content">Content text goes here. </div> <div id="contentBox3">  </div> </div>

あなたはhttp://webdesignmb.com/test/を見ることができます

于 2012-07-23T10:45:20.253 に答える