Еще раз о повторении в определенном направлении

В прошлый раз мы рассматривали значения repeat-x, repeat-y и repeat и влияние этих значений на мозаичное размещение фоновых изображений. Однако во всех этих случаях мозаичный шаблон начинался в верхнем левом углу элемента-контейнера (например, p). Конечно, это не обязательное требование; как мы уже видели, по умолчанию свойству background-position присваиваются значения 0% 0%. Поэтому, если не менять местоположение исходного изображения, мозаичный шаблон начнется именно там, где вы указали. Итак, вы знаете, как изменить положение исходного изображения, и пора выяснить, как в этой ситуации будут себя вести агенты пользователя. Проще всего привести пример и затем объяснить его. Рассмотрим следующую разметку:

p {background-image: url(yinyang.gif);
background-position: center;
border: 1px dotted gray;}
p.c1 {background-repeat: repeat-y;}
p.c2 {background-repeat: repeat-x;}

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


е. и вверх, и вниз. Во втором абзаце изображения повторяются влево и вправо. Следовательно, если поместить большое изображение в центр p, а затем позволить ему повторяться до заполнения всего элемента-контейнера, то оно будет продублировано во всех четырех направлениях: вверх, вниз, влево и вправо. Свойство background-position указывает только место, в котором начинается шаблон мозаики.

Обратите внимание на различия вдоль краев элементов. Когда фон повторяется из центра, как в первом абзаце, сетка символов инь-ян центрирована, в результате чего символы по обоим краям элемента отсекаются симметрично. Во втором абзаце мозаичный шаблон начинается в верхнем левом углу области отступа, поэтому изображения обрезаются только снизу элемента. Разница может показаться небольшой, но полезными могут оказаться оба подхода.

Предупреждая возможные вопросы, скажу, что нет никаких иных способов, позволяющих управлять повторением изображений, кроме тех, что мы уже обсудили. Например, нет значения repeat-left, хотя подобные значения могут быть добавлены в какой-нибудь будущей версии CSS. На данный момент реализовано заполнение шаблоном, мозаичное размещение в горизонтальном и вертикальном направлениях или полное отсутствие мозаичного размещения.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Замещение атрибутов
Значения, заданные в единицах измерения длины
Интересные эффекты

Вернуться в раздел: CSS / 9. Цвета и фон