CSS 精灵和重复背景
我想将所有小图像保存在一个精灵文件中，例如：
现在假设我想要添加一个薄背景图像，该图像意味着重复 x 超过元素宽度的 100%：
这是否必须存储为单独的实体，或者我可以以某种方式将其存储在精灵图像中吗？我不知道是否可以在精灵的一部分上进行背景重复，我认为不可能，但我相当确定我在某个地方看到过它。
I'd like to keep all my small images in one sprite file, for example:
Now suppose I want to add a thin background image which is meant to repeat-x over 100% the width of an element:
Does this have to be stored as a seperate entity, or can I somehow store it in the sprite image? I can't work out if it's possible to do a background-repeat over a section of a sprite, I think not but I'm fairly sure I've seen it done somewhere.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不确定这是否已经在 CSS3 中，但是 Gecko 引擎（Firefox 4 …）将
image-rect添加为-moz-image-rect，它允许您选择图像的特定部分进行使用。这样，您可以选择精灵的一部分作为背景图像，然后重复它。但它绝对还没有广泛普及或成为标准。
我喜欢做的是制作 3 种精灵。一种带有图标，根本不使用重复，一种用于水平重复图像，一种用于垂直重复图像。
这样，您就可以向一个精灵添加多个重复的背景，但使用起来却没有那么麻烦。
I’m not sure if this is in CSS3 already, but the Gecko engine (Firefox 4 …) adds
image-rectas-moz-image-rectwhich allows you to select a specific part of an image for usage. With that you can select a part of your sprite as the background image and then repeat it.It is definitely not wide-spread or standard yet though.
What I like to do is do 3 kinds of sprites. One with icons, where you don’t use repeats at all, one for horizontal-repeating images, and one for vertical-repeating images.
That way you can add several to be repeated backgrounds to one sprite but not have that much of a hassle using it.
您必须将其设置为精灵图像的全宽。否则重复时可能会泄漏其他图像或空白。
请记住，重复非常小的背景图像（1-2px 宽）会对性能产生可怕的影响 - 最好使用稍大一点的图像，因此即使它太宽 - 它实际上可以比 1px 更好地进行页面渲染宽一。
编辑：（关于您的编辑）
如果您的元素是固定高度，您可以将其放在精灵宽度 100% 精灵宽度上，并具有元素所需的最大高度。或者，如果您知道其最大宽度小于精灵的宽度，则将其设为具有元素最大宽度和高度的矩形。
如果您不知道最大高度并且想将其放在最顶部以便渐变变成纯色，则可以通过将重复图像放在精灵的最底部并将其定位为负顶部值< code>background-position: 0px -300px 其中 300px 是从精灵顶部到精灵背景图像顶部的距离。
看看谷歌如何在精灵上定位重复的背景：
You'd have to make it full width of the sprite image. Otherwise it could leak other images or blank space when being repeated.
Remeber that repeating really small background images (1-2px wide) can have terrible impact on performance - it's always better to use a bit larger images for that so even if it would be wee wide - it can actually be better page rendering wise then 1px wide one.
EDIT: (regarding your edit)
If your element is fixed height you can put it on your sprite width 100% width of the sprite with the required max-height of the element. Or if you know that its max width is smaller then the width of the sprite then make it a rectangle with the max width and height of your element.
If you dont know the max height and you want to put it at the very top so the gradient eases into a solid color it can be done if you put your repeated image at the very bottom of the sprite and position it with negative top value
background-position: 0px -300pxwhere 300px is the distance from the top of your sprite to the top of the background image on your sprite.Look here how google positioned repeated BG on a sprite: