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

Question

下午好，祝大家圣诞快乐。

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

是否可以使用背景重复 X 和 Y 的 Sprite 和/或使用 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

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

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