0

周りに境界線があるボックスがあり、この画像のように 3 つの部分 (上、中央、下) に分割します。

ここに画像の説明を入力

ボックスはラッパーに配置されます。これが私のコードです。

CSS:

.wrapper { background: url("../images/sprites.png") no-repeat; }
.box-top { background-position: -258px -234px; width: 685px; height: 35px; }
.box-middle { background-position: -258px -271px; width: 684px; height: 1px; }
.box-bottom { background-position: -258px -274px; width: 685px; height: 35px; }

HTML:

<div class="wrapper">
   <div class="box-top"></div>
   <div class="box-middle">
       Lorem ipsum dolor sit amet
   </div>
   <div class="box-bottom"></div>
</div>

問題は、テキストが下に伸びたときに正常に表示されるようにしようとしていることですが、すべての画像がスプライトに配置されており.box-middle、高さからわかるように1pxであり、それを変更すると、指定した画像の位置だけではなく、スプライト全体が表示されます。多分私は何か間違ったことをしていますか？皆さんに私を正しい方向に向けてもらいたいです。ありがとう

4

2 に答える 2

2

最初に気づいたのは、上、中、下に背景画像が設定されていないことです。そんなはずじゃないの？

background-image:url('top.png');
background-repeat: repeat-y;

トリックを行う必要があります。

于 2013-07-08T09:25:33.817 に答える