CSS精灵中的CSS背景位置和背景重复

Question

我有一个盒子，周围有一个边框，我将它分成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 ，如果我将其更改为更多，则整个精灵将显示而不是仅显示我指示的图像位置。也许我做错了什么？我想取悦你们，让我指出正确的方向。感谢

Answer 1

如果使用精灵，则需要固定大小。你无法裁剪背景。但是，您可以使用background-size: cover在宽度上拉伸它并保持比例。但是如果你的背景尺寸很小，这对你没有帮助，因为拉伸会失去它的质量。如果你的精灵很大，这可能是一个不错的解决方案，但你需要尝试看看你的特定精灵大小如何与它一起工作。

Answer 2

我注意到的第一件事是顶部，中部和底部没有背景图像集。它应该是那样的吗？

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

应该做的伎俩。