Логическое объяснение для фонового положения CSS?

Question

Для приложения с большим количеством значков, я хочу создать спрайт изображения. Так как я начал свое «приключение» в земле вебдизайн/фронтальный Webdev, я всегда задавался вопрос: какова логика background-position: (left)<number>px (top)<number>px;

Когда вы сравните это сокращённое свойство для любого дополнения или марж (если только указав верхнюю и левую), это оба property: (top)<number>px (left)<number>px; Таким образом, верхнее и левое значения меняются на противоположные.

Кроме того, предположим, что у меня есть спрайт 64px (длина) x 16px (высота) и содержит в общей сложности 4 значка 16x16. Для того, чтобы получить вторую иконку в спрайта (| _ ___ | _this_ | _ __ | ____ |), вы должны ввести background-image: -16px 0px; вместо 16px 0px (что было бы логично, потому что второй значок начинается на 16 пикселей позже первого).

Если вы хотите пример (я знаю w3schools не всегда правильно, но он будет делать для примера): http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

Так что мой вопрос: Почему все значения свойства фона позиции, как, ... отменено? Есть ли какая-то логика? CSS читает свойство справа налево?

Answer 1

При использовании сокращения для поля (или заполнения) только с двумя значениями вы не устанавливаете позицию X/Y - вы устанавливаете четыре поля, используя то же значение для верхнего & дна (по вертикали), а также правый & левый (горизонтальные поля). Вы также можете передать четыре значения, и они начнут с крайнего края и продолжатся по часовой стрелке вокруг окна (вверху -> справа -> внизу -> слева).

Обычно я помню это, используя слово «проблема» без каких-либо гласных (TRBL).

В любом случае: для позиционирование существует только два значения, и обычно используется вертикальная ось (ось x, 0 сверху), а затем горизонталь (ось y, 0 слева), поэтому использование отрицательного значения для оси y в фоновом положении приведет к перемещению фона в том же направлении, в котором вы переместили бы поле, если бы вы дали ему отрицательное левое поле.

.class1 { 
    background-position: -20px 0; // move background 20px left 
    margin-left: -20px; // move box 20px left (margin, following items will also move) 
} 

.class2 { 
    position: relative; 
    left: -20px; // move box 20px left (position, following items will stay put) 
} 

Так что я думаю, что я пытаюсь сказать, что значения в основном когерентные, в зависимости от того, как вы смотрите на него;)

Docs for margin (check the syntax list)