1

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

我有不同的 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 方向等等应该如何创建精灵以及如何在 CSS 中使用它来减少 HTTP 请求的数量。

我希望这个问题很清楚。

4

3 回答 3

3

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

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

如果您定期放置图像，则精灵更易于维护，这样您在应用位置时不必检查文件，您可以根据您选择的比例简单地设置background-position:0 0;、background-position:0 -100px;、等。background-position:0 -200px;

于 2010-06-02T00:01:57.323 回答
1

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

[1][2]\[3][%][%][%][%][%][%][%][%]
[%][%] | [4][%][%][%][%][%][%][%][%]
[%][%] | \_________________________/
[%][%] | | （水平的）
[%][%] |— 元素的最大可能维度
[%][%] | （垂直的）
[%][%] |
[%][%] |
[%][%]/

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

于 2010-06-01T17:57:07.017 回答
1

CSS Spritemap（一个sprite仅指 spritemap 中的 1 个图像）并不是所有事物的圣杯。您不应该尝试将所有图像填充到一个中，这是一个很好的示例，说明何时不要这样做，因为您最终会得到一个巨大的 spritemap 图像，而性能方面则是较小的第二个图像（同时添加另一个请求，我假设您发送正确的缓存标头）是更快、更容易和更轻的选项。

于 2010-06-01T18:01:21.970 回答