将精灵中的图像放置在特定位置

时间:2010-12-01 18:06:24

标签: css background css3 background-position

假设我有一个带有很多图标的精灵。我想将其中一个图标放在div上的特定位置,例如右侧15px,顶部20px。 以前,当我有单个图像文件时,我使用了以下代码:

background: white url(./imgs/some/icon.png) no-repeat 91% 47%;

现在,图像在精灵中,我可以使用

访问它
background-position: 0 -471px;

但是我认为没有地方可以加上目前的91%47%。有某种解决方法吗? 如果它有帮助,可以在项目中使用CSS3。

谢谢!

2 个答案:

答案 0 :(得分:2)

您是否可以添加另一个<div>,为其提供正确的背景,并将其绝对定位到需要的位置?我认为当你使用精灵表时你的背景位置百分比可能已经消失了。

答案 1 :(得分:0)

如果我正确理解了你的一组约束,你可以用一个div来拉它,但前提是你的png有一个透明的背景,而且图标有足够的“透明空间”,不能透露任何其他图标

尝试:

background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;