За счет чего происходит движение фона?

Question

[Рома Зварич]

Здравствуйте.
Помогите пожалуйста понять, почему изменение "background-position" приводит к смещению фона влево?
Или не это происходит?
Речь об изменении фона при наведении на ссылку.



Как я понимаю это:
1) Мы задаем в виде фона градиент, состоящий из двух цветов
2) С помощью "background-size: 200% 1px" делаем фон в 2 раза шире элемента, к которому его применяем. Чтобы перемещая его, видеть только один из цветов

........и вот дальне непонятно
3) Изначально мы устанавливаем начало фона в левом нижнем углу через "background-position: 0% 100%"
4) А при наведении смещаем начало фона в правый нижний угол.

Вопрос №1:
Если мы смещаем начало фона к правому краю нашего элемента, за которым ничего не видно, почему фон всё еще виден? ("no-repet" же установлен)

Вопрос№2:
Почему, хотя мы смещаем фон вправо, при наведении на элемент фон движется влево?
Я понимаю, что это просто "transition" плавно переводит вид из начального в конечное положение.
Но почему фон в итоге смещается влево?

Спасибо

Answer 1

[lamer350]

За счет изменения точки положения. В обычном режиме background-position: 0% 100% у вас справа еще есть по сути красный фон такой же длины как и блок, но он не виден так как выходит за видимые границы. Но вы просто представьте условно что синяя линяя далее продолжается на точно такое расстояние справа но уже имеет красный цвет.
Когда при hover вы устанавливаете новые координаты: background-position: 100% 100%, вы говорите что фон должен начинаться с правого угла, таким образом весь фон сдвигается плавно (из за transition) и по сути теперь так же синия линия уходит в лево но вы просто ее не видите.

Comments

[Рома Зварич]

> вы говорите что фон должен начинаться с правого угла
Вот оно, что!
Он начинается справа и идет влево.
Теперь понятно.
Спасибо.

[lamer350]

Рома Зварич, да, а чтобы код был более понятен и для вас - можно использовать просто: left/right/top/bottom/center в тех случаях где это можно, тогда ваш код был бы таким: background-position: left bottom; а при hover background-position: right bottom;