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

【问题标题】：Placing an image from the sprite in the specific position将精灵中的图像放置在特定位置
【发布时间】：2010-12-01 18:06:24
【问题描述】：

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

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

现在图像在精灵中，我可以使用它来访问它

background-position: 0 -471px;

但在我看来，没有地方可以添加我当前的 91% 47%。有什么解决方法吗？如果有帮助，可以在项目中使用 CSS3。

谢谢！

【问题讨论】：

【解决方案1】：

您能否添加另一个<div>，为其提供正确的背景，并将其绝对定位到需要的位置？我认为当您使用精灵表时，您的背景位置百分比可能已经超出。

【讨论】：

【解决方案2】：

如果我正确理解了您的一组约束，您也许可以用一个 div 来完成它，但前提是您的 png 具有透明背景并且图标具有足够的“透明空间”以不显示任何其他图标.

试试：

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

【讨论】：