css精灵的背景定位

时间:2012-06-24 12:11:14

标签: css sprite

background-position css属性是否用于指示元素在图像中的显示位置(如this)或应显示图像的哪个部分(如使用精灵时)?

在我的实例中,我有一个让我们说300px宽度的div,我希望图像显示在该元素的右侧部分,所以通常我只是在我的背景声明中添加了center right,虽然现在我的图像是精神所以我如何控制我想要显示的图像的坐标?  在我看来,这个背景属性以两种不同的方式行事。我错过了什么吗?

2 个答案:

答案 0 :(得分:0)

如果要放置精灵元素的位置比元素大,那么你需要在它周围放置空格(trasnparent)。并且您不能使用像center这样的关键字,您需要使用像素,因为您将使整个精灵居中而不是您的元素。

使用精灵就像使用窗口,其中背景比背景图像大,所以你需要定位窗口(实际上你定位背景)。

答案 1 :(得分:0)

如果容器大于要显示的背景精灵图像部分,则还会显示图像的其他部分。更好地使用Sprite cow来生成精灵,它会为精灵图像的不同部分提供css

http://www.spritecow.com/