CSS Sprites和重复的背景 [英] CSS Sprites and repeating backgrounds

问题描述

我想将所有小图片保存在一个sprite文件中，例如：

I'd like to keep all my small images in one sprite file, for example:

现在假设我想添加一个薄的背景图像，这意味着repeat-x超过100 ％元素的宽度：

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.

推荐答案

我不知道这是否在CSS3已经，但Gecko引擎（Firefox 4 ...）添加 image-rect 作为 -moz-image-rect ，它允许您选择图像的特定部分以供使用。你可以选择你的sprite的一部分作为背景图像，然后重复它。

I’m not sure if this is in CSS3 already, but the Gecko engine (Firefox 4 …) adds image-rect as -moz-image-rect which 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.

我喜欢做的是做3种精灵。一个带有图标，其中不使用重复，一个用于水平重复图像，一个用于垂直重复图像。

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.

这篇关于CSS Sprites和重复的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！