CSS спрайт с отрицательным фоновым положением не ясно - PullRequest
Новая
       3

CSS спрайт с отрицательным фоновым положением не ясно

3 голосов
/ 20 марта 2011

Я работаю над некоторым существующим кодом, где они используют css-спрайты.Это большое изображение, и оно использовалось для отображения всех изображений.

Это в основном элементы Ul и li.Каждый элемент li использует это изображение и использует положение фона.

Я понял, что спрайты CSS полностью, это для лучшей производительности.Но единственное, что неясно, это то, почему позиции x и y начинаются с отрицательных полей.Большинство изображений в спрайтах получают заново, используя что-то вроде 

-540px -30px like this

Я смотрел это изображение в браузере, и оно отображается правильно, и они должны с 0,0 справа.

я что-то здесь упускаю

Ответы [ 3 ]

11 голосов
/ 20 марта 2011

Просто думайте об элементе как окошко с движущимся за ним спрайтовым изображением.

0,0 - верхний левый угол глазка.

В зависимости от того, какую часть огромного спрайтового изображения вы хотите увидеть, вам нужно , чтобы задать ему отрицательное смещение. 

-50, -20
|-----------------------------------------------|
|                                               |
|       0,0                                     |
|       |-----|                                 |
|       |     |  <--- Peep-hole                 |
|       |-----|                                 |
|                                               |
|                                               |
|-----------------------------------------------|
2 голосов
/ 30 августа 2011

Сказал по-другому: как далеко находится твоя дырка от верхнего левого угла.Если у вас фоновая позиция -50, -20, это означает, что если бы вы переместили глазок в верхний левый угол, ему пришлось бы двигаться влево на 50 пикселей (следовательно, отрицательно) и вверх на 20 пикселей (следовательно, тоже отрицательно).Таким образом, позиционирование измеряется с точки зрения смотрового отверстия и его положения с левого верхнего угла.

1 голос
/ 20 марта 2011

http://www.alistapart.com/articles/sprites

У вас есть клоп-убийца?http://getfirebug.com

Если это так, просто осмотрите один из элементов со спрайтовым фоном и измените положение фона на 0 0. Затем просто начните играть с позиционированием, и вы сможете понять, как это работает.

background-position: 0 0; означает, что фоновое изображение размещено в 0 пикселях слева и 0 пикселей сверху.

background-position: 0 -50px; означает, что фоновое изображение размещено в 0 пикселях от левой границы и 50пикселей выше верхней границы, эффективно перемещая фоновое изображение вверх на 50 пикселей.Попробуйте сами, используя firebug или просто изменив таблицу стилей и обновив ее, чтобы увидеть эффекты.

...