不同高度和宽度的CSS Sprite

Question

下午，祝大家圣诞节过得愉快。

为了尽可能减少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}

Answer 1

精灵和重复并不是真正的结合。 -moz-image-rect有一个技巧，但它似乎仅适用于Gecko 。

当然，您可以将多个重复Y的图像并排放置，也可以将多个重复X的图像并排放置。 但是如果您想同时在X和Y方向上重复，则必须是一幅图像。

Answer 2

我认为不可能这样做。

Answer 3

CSS2子图形很难应用，因为您只能将子图形用于指定宽度/高度的非重复模式。 出于种种考虑，我将使用css sprite进行具有固定宽度/高度的图像翻转，然后简单地调用background-position: 0 -10px; 如果图片高10像素，并且通过垂直堆叠图片创建了CSS精灵。

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

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

Answer 4

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

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

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

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

• http://www.css3files.com/background/
• http://www.standardista.com/css3/css3-background-properties/
• poylfill用于较小版本的IE