0

私はこれに数時間取り組んできましたが、頭を包み込むことができないようです。下に 3 つの画像があり、これらの上にテキスト コンテンツを配置したいのですが、どうすればよいですか?
中央の画像は、コンテナーの div が展開されるときに繰り返す必要がある画像です。

わかりました、情報が不足していることをお詫びします。少し遅れており、正確に考えていません. 3 つのイメージすべてを含むコンテナーを構成したいと考えています。このコンテナーの最小の高さは、上部と下部の画像になります。コンテンツがこの最小の高さからオーバーフローし始めると、中央の画像が繰り返されて、より高い高さに対応するようになります。

上: 代替テキスト http://files.droplr.com/files/45544730/INDf3.Page.png

中央の繰り返し: 代替テキスト http://files.droplr.com/files/45544730/INE5i.Page-Tile.png

下: 代替テキスト http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png

4

7 に答える 7

3 
TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

代わりにクラスを指定し、スタイルシートで処理します

于 2010-03-31T14:02:52.563 に答える
2 
<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

それぞれdiv個別backgroundの CSS スタイルを指定します。

しかし、私は、テキストにスタイリングを
与えることをお勧めします。 この場合、必要なのは中央の画像だけです。backgrounddivbox-shadowborder

于 2010-03-31T13:57:21.047 に答える
1

私の解決策：

私は通常、次のようにします。

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

CSS:

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}

通常、div の下部は非常に小さいため、空白のままにしても問題ありません (デザイン全体にスペースを追加するため)。また、負の margin-bottom サイズは次のようにする必要があります: -( height- what_you_want_to_remain_empty) - つまり、.box .header画像が540pxあり、上部を50px空のままにしたい場合は-490px、私が持っていたように設定します。

幸運を。

于 2010-03-31T14:10:09.877 に答える
0

Seth Mの答えでは、トップ（頭）とボトム（足）のdivの高さを指定する必要があると思います。

その後、正常に動作します。

于 2010-03-31T14:10:19.370 に答える
0 
div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

ボックス内の画像として上部と下部の写真を配置するのは素晴らしいことですが、常に最初と最後になります。もちろん、マージンやパディングがある場合は機能しませんが、これも試してみてください。

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

それは、ある種の奇妙な方法で、まさにあなたが望むものを与えるはずです. 古いブラウザーはこれらの CSS ルールをサポートしないことに注意してください。

于 2010-03-31T14:10:43.460 に答える
0

これは、投稿した画像を使用した HTML/CSS を使用した完全なコードです。ヘッダー部分はかなり「背が高い」です。それはあなたのデザインの一部だと思います。

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>
于 2010-03-31T14:11:43.830 に答える
0

これまでのコードがあると便利ですが、試してみます。

イメージごとにコンテナーが必要になります。

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

--css--

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

おそらく、最初の画像を最後の画像とほぼ同じサイズにし、必要に応じて2番目の画像を埋めたいと思うでしょう。

于 2010-03-31T14:05:36.887 に答える