Как работают спрайты в jqmobile? - PullRequest
Новая
       11

Как работают спрайты в jqmobile?

0 голосов
/ 11 июля 2011

Я думаю, что у меня есть разумное понимание того, как работают css-спрайты, но я сбит с толку тем, как это делает 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%.

Может кто-нибудь помочь мне понять?

1 Ответ

2 голосов
/ 11 июля 2011

У спрайта, о котором вы говорите, много белых значков на прозрачном фоне. Если вы используете легкий бесплатный инструмент, такой как IrfanView, вы увидите его так: enter image description here background-position: -576px 50%; означает, что фон будет размещен в позиции -576 слева и 50% сверху, что, как мне кажется, означает значок home. Хотя, возможно, бит 50% не будет иметь значения в этом случае, поскольку высота установлена ​​в 16px, но, возможно, это имеет значение для некоторых других странных мобильных браузеров.

...