0

I have a box that has a border around it, I split it into 3 parts like in this image (top, middle and bottom):

enter image description here

The box is placed in a wrapper, here is my piece of code:

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>

Well the problem is that I am trying to make it to show up normally when text stretches to bottom, but I can't, because all my images are arranged in a sprite, and as you see from .box-middle the height is 1px and if I'll change that to more then the whole sprite will show up instead of only image position that I have indicated. Maybe I'm doing something wrong? I want to please you guys to point me in the right direction. Thanks

4

2 回答 2

2

我注意到的第一件事是顶部、中间和底部没有设置背景图像。应该是这样吗？

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

应该做的伎俩。

于 2013-07-08T09:25:33.817 回答
2

如果你使用精灵，你需要一个固定的大小。您不能裁剪背景。但是，您可以使用background-size: cover它在宽度上拉伸并保持比例。但是，如果您的背景尺寸很小，那将无济于事，因为拉伸会失去其质量。如果您的精灵很大，这可能是一个不错的解决方案，但您需要尝试查看您的特定精灵大小如何与它配合使用。

于 2013-07-08T09:12:54.040 回答