精灵如何在jqmobile中运行？

Question

我认为我对css sprites如何工作有一个合理的理解，但我对JQ Mobile如何做到这一点感到困惑。作为一个示例，我整理了一个非常基本的版本：

<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id">&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>

这是jqm如何做到这一点。我没有得到的是，如果你将png文件加载到图像编辑器中它是完全白色的，我看不到那里的任何图像。我也完全混淆为什么背景位置的y为50％。

任何人都可以帮助我理解吗？

Answer 1

您正在谈论的精灵在透明背景上有许多白色图标。如果你使用像IrfanView这样的轻量级免费工具，你会看到这样的： background-position: -576px 50%;表示背景位于左侧-576位置，顶部位置50％，我认为是home图标所在的位置。虽然在这种情况下50%位可能无关紧要，因为高度设置为16px，但对于其他一些奇怪的移动浏览器来说可能很重要。