如何使用背景和CSS精灵重复图像的一部分? [英] How do I repeat part of an image using background-position and CSS sprites?
问题描述
我想使用CSS精灵和背景位置创建一些具有动态宽度的按钮，但是我不确定我想要的东西是否可以实现..
I would like to create some buttons with dynamic width using CSS sprites and background-position but I'm not sure if what I want is possible..
我希望按钮具有左侧，中间和右侧，并根据需要重复中间.理想情况下，我希望此图像由一张11像素宽的图像组成，因此左右两侧均为5像素宽，中间为1像素重复.我可以在CSS中定义某种方法来使用图像的一个中心像素，并在需要(未知)宽度时重复该操作吗?
I would like the button to have a left-side, middle, and right-side, with the middle repeating as required. Ideally I would like this to be made up of one image of 11px wide so the left and right sides are both 5px wide and the middle is 1px repeated. Is there some way I can define in CSS to use the one centre pixel of the image and repeat if for the required (unknown) width?
通常我使用两张图像来达到类似的效果-一张图像用于侧面，另一张图像用于中间图像，宽度为1px，但是如果有某种方式将它们组合为一张图像，则我更愿意使用它.
Normally I've used two images to achieve similar results - one for the sides and a second image of 1px width for the middle, but if there's some way of combining them into one image I would prefer to use that.
推荐答案
简短的答案是:使用sprite贴图，且尺寸不可变，这是不可能的(或者至少99％的时间不值得).
The short answer is this isn't possible (or at least, not worth it 99% of the time) with a sprite map, not with varying dimensions.
在大多数情况下，sprite-map对于背景的重复部分而言并不理想，尽管对非重复部分而言效果很好.
In most cases, a sprite-map isn't ideal for the repeating parts of a background, though it's excellent for the non-repeating portions.
Based on what you're after though, I'd take a look at the sliding doors approach to the problem, seems to fit what you want pretty well.
这篇关于如何使用背景和CSS精灵重复图像的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
