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

【问题标题】：CSS Sprite for images which have vertical as well as horizontal repeatsCSS Sprite 用于具有垂直和水平重复的图像
【发布时间】：2011-02-26 11:09:27
【问题描述】：

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

我有不同的 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 请求的数量。

我希望这个问题很清楚。

【问题讨论】：

我不完全理解，但由于重复，这听起来不可能。你能展示一个图形示例吗？
我没有模型。我还能提供什么来为这个问题添加更多的肉吗？
另外，如果我在 x 或 y 方向有重复，为什么我可以创建 CSS Sprite？我是 css sprite 的新手，如果有人能给出正确的解释，我将不胜感激。

标签： css user-interface frontend

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

你能不能在这里补充一些解释，因为我无法理解？
@Rachel：他是说你可能（甚至很可能）想要做的是浪费时间；四个请求不是世界末日，也不是很罕见。

【解决方案3】：

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

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

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

【讨论】：

你能解释更多吗，作为css sprite的新手，一些解释真的有助于理解这个概念。
@Rachel: 就像reisio.com/temp/sprite_repeat.png——你手动在图像本身中重复（包括）“图像”（精灵），不再需要CSS 完全重复。