0

下午，希望你们都有一个美好的圣诞节。

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

是否可以使用背景重复 X 和 Y 和/或使用 width=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}
4

4 回答 4

2

精灵和重复并没有真正结合起来。有一个技巧，-moz-image-rect但它似乎是 Gecko-only。

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

于 2012-12-26T16:19:21.533 回答
1

我认为不可能这样做。

于 2012-12-26T16:18:35.760 回答
1

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

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

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

于 2012-12-26T16:18:48.877 回答
0

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

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

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

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

于 2012-12-26T16:58:12.287 回答