CSS可以用精灵图像的1px区域填充元素的背景吗?

时间:2012-08-01 18:46:17

标签: css sprite

我喜欢精灵,但它们对我的整体需求非常有帮助。我想弄清楚是否有一种方法可以使用精灵图像作为100%宽的元素的背景图像,但我要应用的精灵的背景部分是1px宽。目前,精灵的宽度为100px,高度约为180px。这甚至可能/合法吗?如果是这样,我该怎么做?或者我是否必须坚持使用独立于精灵的1px x 120像素图像来按照我想要的方式跨越背景?

注意我只考虑将sprite的0 0位置作为我想要的BG,但我的问题是我有一个类似的精灵部分我想用作某些区域的翻转效果

3 个答案:

答案 0 :(得分:1)

对于重复的背景图像,您需要使用独立于精灵的图像;据我所知,没有办法指定精灵的特定片段在背景中重复,所以你最终只是显示并重复整个精灵。

在Chromium 19中,似乎使用background-size isn't the answer

答案 1 :(得分:1)

我认为您可以通过伪背景裁剪来实现这一目标。这里有一篇有用的文章:http://nicolasgallagher.com/css-background-image-hacks/可能有所帮助。

然而,我怀疑这可以用作重复的背景图像。你可以伸展它(background-size:100%),但我不确定。

答案 2 :(得分:-1)

因此它将3个div放在一个div中。对于左侧和右侧,像往常一样剪辑您的精灵。对于中间,让你的精灵长得足够长,这样按钮的任何中间部分都会被精灵的长部分填充。

永远不要问问题,发挥想象力。