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

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

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

Answer 2

我认为不可能这样做。

Answer 3

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

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

如果由我决定，我不会花这么多时间来节省这么小的费用。 HTTP呼叫和带宽比以前更便宜，成本更低。你的时间最好花在压缩html上，减少后端的瓶颈，并利用缓存o保存图像。

Answer 4

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

no-repeat个背景，
repeat-x个背景，
repeat-y背景，
重复背景必须保持原样

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

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

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

4 个答案: