5.20. Установка свойства background-repeat
Если вы назначили свойству background-image файл рисунка, вы можете управлять повторами изображения, назначив свойству background-repeat одно из следующих ключевых слов:
repeat (по умолчанию). Повторяет изображения, как по горизонтали, так и по вертикали. Поскольку это значение устанавливается по умолчанию, добавление background-repeat к правилу STANZA в таблице стилей из Листинга 1.5 (см. ниже) не окажет эффекта на способ отображения документа.
STANZA
{background-image: url(Circle.brnp);
background-repeat: repeat}
repeat-x. Повторяет изображение только в горизонтальном направлении. Например, следующее правило STANZA приведет к отображению документа, как показано на следующем рисунке.
STANZA
{background-image: url(Leaf.bmp);
background-repeat: repeat-x}
Рисунок 13. Повтор изображения только в горизонтальном направлении
repeat-y. Повторяет изображение только в вертикальном направлении. Например, следующее правило STANZA отобразит документ, как это показано на следующем рисунке.
STANZA
{background-image: url(Leaf.bmp);
background-repeat: repeat-y}
Рисунок 13. Повтор изображения только в вертикальном направлении
no-repeat. Приводит к однократному отображению рисунка. Например, следующее правило STANZA отобразит документ, как это показано на следующем рисунке.
STANZA
{background-image: url(Leaf.bmp);
background-repeat: no-repeat}
Рисунок 14. Однократное отображение рисунка
5.21. Установка свойства background-position
По умолчанию верхний левый угол фонового изображения (или верхний левый угол верхней левой копии изображения, если оно повторяется) совмещается с верхним левым углом элемента. Можно изменить такое совмещение, задав значение для свойства background-position. Этому свойству можно назначить три различных вида значений.
Значения горизонтальной и вертикальной позиции в единицах размеров. Свойству background-position можно задать два значения размеров. Первое значение определяет горизонтальную позицию изображения внутри элемента, а второе значение — вертикальную позицию изображения внутри элемента. Можно присвоить любой тип численного значения размера (см. раздел “Задание значений в размерных единицах”). Например, следующее правило помещает верхний левый угол изображения на 0,5 дюймов правее и на 0,25 дюймов ниже верхнего левого угла элемента STANZA:
STANZA
{background-image: url(Circle.bmp);
background-repeat: no-repeat;
background-position: 5in .25in}
Ha следующем рисунке показано как будет выглядеть результат.
Рисунок 15. Однократное отображение рисунка
Если изображение будет повторяться в соответствии с приведенным ниже правилом, весь узор, состоящий из повторных изображений, окажется смещенным, как это показано на следующем рисунке.
STANZA
{background-image: url(Circle.bmp);
background-repeat: repeat;
background-position: .5in .25in}
Рисунок 16. Повторное отображение рисунка со смещением
Значения горизонтальной и вертикальной позиции в процентах. Для свойства background-position можно установить два процентных значения. Первое из них определяет горизонтальную позицию изображения внутри элемента, при этом 0% соответствует левому краю (горизонтальная позиция по умолчанию), 50% соответствует центру элемента по горизонтали, а 100% - правому краю элемента. Второе значение в процентах определяет вертикальную позицию изображения, при этом 0% соответствует верхнему краю (вертикальная позиция по умолчанию), 50% соответствует центру элемента по вертикали, а 100% - нижнему краю элемента. Например, следующее правило поместит изображение в середину элемента:
STANZA
{background-image: url(Circle.bmp);
background-repeat: no-repeat;
background-position: 50% 50%}
На следующем рисунке показан результат действия этого правила.
Рисунок 17. Смещение одиночного изображения в процентах
Если изображение повторяется в соответствии со следующим правилом, весь узор из повторяющихся изображений будет смещен на заданную величину, как показано на следующем рисунке.
STANZA
{background-image: url(Circle.bmp);
background-repeat: repeat;
background-position: 50% 50%}
Рисунок 18. Смещение повторяющегося изображения в процентах
Значения в виде ключевых слов. Вы можете задать позицию фонового изображения, назначив свойству background-position одно или два ключевых слова CSS. Например, введите ключевые слова right и bottom, как в следующем правиле, и ваше изображение будет помещено в правый нижний угол элемента, как показано на верхнем рисунке следующей страницы.
STANZA
{background-image: url(Circle.bmp);
background-repeat: no-repeat;
background-position: right bottom}
Ниже представлены различные варианты сочетаний ключевых, слов и соответствующие им позиции изображения.
Рисунок 19. Задание положения рисунка в соответствии с ключевыми словами
left top (по умолчанию) |
|
center top или top |
|
right top |
|
|
|
|
|
left top или left |
|
center center или center |
|
right center или right |
|
|
|
|
|
left bottom |
|
center bottom или bottom |
|
right bottom |
Рисунок 20. Соответствие позиций и ключевых слов
Порядок ключевых слов значения не имеет. Например, background-position: bottom right эквивалентно background-position: right bottom.