CSS Sprite Вопрос: горизонтальное положение фона - PullRequest
Новая
       7

CSS Sprite Вопрос: горизонтальное положение фона

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

Я смотрю на этот спрайт учебник здесь . Готовый результат CSS-спрайтов находится здесь . И это весь рабочий код: 

#skyline {
 width: 400px;
 height: 200px;
 background: url(test-3.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(test-3.jpg) -283px -200px no-repeat;}

Я немного растерялся. В части кода a:hover (той части, где должны отображаться спрайты), вертикальное положение фона спрайтов установлено на -200px, что имеет смысл, поскольку верхний угол должен быть выше текущего запуска указать для этого фонового изображения. Но почему горизонтальное положение должно быть отрицательным (-96px, -172px)? Моя первая интуиция заключалась в том, что если вы начнете с 0, то следующий будет начинаться с ширины последнего, которая равна + 96px. Если мы говорим о регулярных координатах, я не понимаю, почему мы должны использовать отрицательное значение для горизонтального положения там ...

Теперь, если я изменю их все на положительные, то спрайт больше не будет работать. Так почему же это отрицательно? Может кто-нибудь опытный с CSS объяснить мне это? Буду признателен за любой ответ / вклад спасибо

EDIT:

Это главное изображение: Мастер-изображение

1 Ответ

5 голосов
/ 13 июля 2011

Позиция указывает, куда нужно "сдвинуть" таблицу спрайтов, чтобы показать изображение на странице.Поэтому, если изображение имеет 96 пикселей вправо, вам нужно сдвинуть весь лист на 96 пикселей влево, чтобы отобразить его.

Фактически, у вас есть 4 панели различной ширины.Когда мышь наводит курсор, она берет копию изображения, перемещает ее на 200 пикселей вверх, чтобы получить изображение при наведении, затем перемещает его влево, чтобы на панели начинался правильный срез.Ширина панели обрезает правую сторону изображения.

enter image description here

...