具有不同高度和宽度的 CSS Sprites

Question

下午，祝大家圣诞快乐。

为了尽可能减少 HTTP 请求，我想制作一个包含所有背景图案的精灵。我已经为网站制作了 2 个精灵，但都使用特定的高度和/或宽度尺寸

是否可以使用背景重复 X 和 Y 和/或使用宽度=100% 的精灵？

我有这些文件：

blog.png (65px*65px)
contacts.png (67px*100px)
intro.png (50px*50px)
portfolio.png (80px*80px) 

对于每个我都有这样的 CSS：

#intro{width:100%;background:url(../img/pat/intro.png) repeat}
#portfolio{width:100%;background:url(../img/pat/portfolio.png) repeat;padding-bottom:30px}
#contact{background:url(../img/pat/contacto.png) repeat;padding-bottom:50px}

Answer 1

根据它们的重复方式，有 4 种 CSS 背景图像，其中 3 种可以组合成 CSS 精灵，唉，3 种不同的精灵（仍然比 30 张图像更高效）。

• no-repeat 1 个精灵中的背景，
• repeat-x 第二个精灵中的背景，
• repeat-y 第三个精灵中的背景，
• 重复背景必须保持原样

您有不同尺寸的背景，例如repeat-x 背景，宽度分别为 32、33、50 和 80 像素。我得到的建议是选择最大的一个并制作一个带有这种大小的条纹的精灵（这里是 80 像素）。然后，无论每个图像的确切宽度如何，您只需应用 0、-80px、-160px 等的 background-position。如果您将 32 像素的图像替换为 33 像素之一，您将不必替换以下图像中的所有 background-position 并在 Photoshop 中将所有图层仔细翻译 1 像素！
如果除了一个 80 像素的宽度之外，所有宽度都为 33 像素，您可以通过安全性选择制作 40 像素的条纹，并将80px 放在最后，使其成为特殊情况。

与精灵无关，您还可以阅读新的background-* 属性（如background-size: cover）：

• http://www.css3files.com/background/
• http://www.standardista.com/css3/css3-background-properties/
• poylfill for lesser versions of IE

Answer 2

精灵和重复并没有真正结合起来。 -moz-image-rect 但it seems to be Gecko-only 有一个技巧。

当然，您可以将多个 Y 重复图像并排放置在一起，或者将多个 X 重复图像放在一起；但是如果你想在 X 和 Y 两个方向上重复，它必须是一个单一的图像。

Answer 3

CSS2 sprite 很难应用，因为您只能将 sprite 用于具有指定宽度/高度的非重复模式。例如，我会使用一个 css sprite 来实现具有固定宽度/高度的图像翻转，然后如果图像高 10px 并且 css sprite 是通过垂直堆叠图像创建的，则只需调用background-position: 0 -10px;。

CSS3 允许您进行背景裁剪或其他创新方式，从而为您提供更好的控制。我会做一个谷歌搜索以了解更多信息。

如果由我来决定，我不会花这么多时间在这么小的成本节约策略上。 HTTP 调用和带宽比以往任何时候都便宜且成本更低。您最好将时间花在压缩 html、减少后端瓶颈以及利用缓存或保存图像上。

Answer 4

我认为不可能这样做。