How do sprites work in jqmobile?

I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:

<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>

Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.

Can anyone help me understand开发者_Python百科?

---

The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:

background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.