Повторения в определенном направлении

Раньше, чтобы обеспечить фон для врезки, приходилось создавать очень узкое, но чрезвычайно длинное изображение. Одно время такие изображения чаще всего имели 10 пикселов в высоту и 1500 пикселов вширину. Большую часть такого изображения, конечно, занимало пустое пространство, и лишь примерно 100 пикселов слева содержали изображение-«врезку». Остальная часть изображения зря занимала место. Может быть, намного эффективнее создавать для врезки изображение высотой 10 и шириной 100 пикселов, не занимая лишнего места, и потом повторять его только в вертикальном направлении? Это, определенно, облегчило бы вашу работу и намного уменьшило бы время загрузки страницы. Рассмотрим свойство background-repeat.

Как вы, возможно, догадались, если задано значение repeat, изображение выкладывается мозаикой в вертикальном и в горизонтальном направлениях, как это всегда происходило с фоновыми изображениями раньше. Если задать значения repeat-x и repeat-y, то изображение повторяется в горизонтальном или вертикальном направлениях соответственно, а значение no-repeat вообще предотвращает мозаичное выкладывание изображения в любом направлении. По умолчанию фоновое изображение размещается, начиная с верхнего левого угла элемента.


(Позже в данной главе мы увидим, как изменить это поведение.) Поэтому применение следующих правил даст результат:

body {background-image: url(yinyang.gif);
background-repeat: repeat-y;}

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

body {background-image: url(yinyang.gif);
background-repeat: repeat-x;}

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

body {background-image: url(yinyang.gif);
background-repeat: no-repeat;}

Это значение может показаться не особо полезным исходя из того, что данное объявление просто разместило бы изображение в верхнем левом углу документа, но давайте применим его к изображению большего размера:

body {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;}

Возможность задавать вектор повторения существенно расширяет диапазон возможных эффектов.


Предположим, требуется разместить тройную рамку с левой стороны каждого элемента h1 документа. Эту идею можно развить и добавить волнистую рамку над каждым элементом h2. Из-за окраски изображение сливается с фоном, создавая иллюзию волны:

h1 {background-image: url(triplebor.gif); background-repeat: repeat-y;}
h2 {background-image: url(wavybord.gif); background-repeat: repeat-x;
background-color: #CCC;}

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

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

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

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