html - CSS 背景位置和 CSS Sprite 中的背景重复

Question

我有一个周围有边框的盒子，我将它分成 3 个部分，如下图所示(顶部、中间和底部):

盒子放在 wrapper 里，这是我的一段代码:

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>

问题是我试图让它在文本延伸到底部时正常显示，但我做不到，因为我所有的图像都排列在一个 Sprite 中，正如你从 .box 中看到的-middle height 是 1px，如果我将其更改为更多，那么整个 sprite 将显示出来，而不仅仅是我指定的图像位置。也许我做错了什么？我想请你们给我指明正确的方向。谢谢

Answer 1

如果你使用 Sprite ，你需要一个固定的大小。你不能裁剪背景。但是，您可以使用 background-size: cover 将其沿宽度拉伸(stretch)并保持比例。但是如果你的背景尺寸很小，那对你没有帮助，因为向上拉伸(stretch)会失去它的质量。如果您的 sprite 很大，这可能是一个不错的解决方案，但您需要进行试验以了解您的特定 sprite 大小如何与它配合使用。