Question

我有四个图像，其中一个在水平方向上具有背景重复属性，其中三个在垂直方向上具有背景重复。

我有不同的CSS类，目前使用这些图像，如下所示：

.sb_header_dropdown {
     background: url(images/shopping_dropdown_bg.gif) repeat-y top left;
     padding: 8px 3px 8px 15px;
 }


 .shopping_basket_dropdown .sb_body {
     background: url(images/shopping_dropdown_body_bg.png) repeat-y top left;
     margin: 0;
     padding: 5px 9px 5px 8px;
     position: relative;
     z-index: 99999;
 }


 .checkout_cart .co_header_left {
     background: url(images/bg.gif) repeat-x 0 -150px;
     overflow: hidden;
     padding-left: 3px;
 }

 .sb_dropdown_footer {
     background: url(images/shopping_dropdown_footer_bg.png) repeat-y top left;
     clear: both;
     height: 7px;
     font-size: 0;
 }

所以这里正在制作4个HTTP请求，我想为所有4个图像实现CSS Sprite，这样我就可以将HTTP请求的数量从4减少到1，同时要记住的是这里我们有背景重复所有4个图像，无论是在x方向还是在y方向，因此应该如何创建sprite以及如何在CSS中使用它来减少HTTP请求的数量。

我希望这个问题很明确。

Answer 1

您只能将精灵用于以相同方向重复的图像。这是因为无法通过CSS限制可重复区域，因此如果您在水平重复，则不能沿着您想要重复的部分的水平轴放置任何其他图像，或者它们将包含在重复中。因此，对于背景图像，具有背景在多个方向上重复的页面将能够减少到不少于2个HTTP请求。

您可以创建两个文件：a { {1}}和sprite_repeaty.png。所有带有repeat-y的背景都可以放在sprite_repeatx.png的上边缘上。您可以沿sprite_repeaty.png的左边放置所有具有repeat-x的背景（现在只有一个，但您可以将其设置为以后）。如果您有不重复的图标或背景，它们可以包含在这些文件中。

如果您定期放置图像，以便您不必在应用职位时检查文件，您只需设置sprite_repeatx.png，background-position:0 0;，background-position:0 -100px;等，具体取决于您选择的比例。

Answer 2

您必须手动重复图像中的精灵，以便不需要实际的自动CSS重复。

[1][2]\      [3][%][%][%][%][%][%][%][%]
[%][%] |     [4][%][%][%][%][%][%][%][%]
[%][%] |     \_________________________/
[%][%] |              | (horizontal)
[%][%] |— maximum likely dimension of element
[%][%] | (vertical)
[%][%] |
[%][%] |
[%][%]/

这可能或者可能不是特别值得，主要取决于图像需要多大。

Answer 3

CSS Spritemap（ sprite 仅引用 spritemap 中的1个图像）并不是所有事情的圣杯。你不应该试图把你的所有图像拼凑成一个，这是一个很好的例子，当你没有，因为你将最终得到一个巨大的spritemap图像，而性能明智一个较小的第二个图像（同时添加另一个请求，我假设您发送正确的缓存标头）是更快，更简单，更轻的选项。

CSS Sprite用于具有垂直和水平重复的图像

3 个答案: