Процентные значения

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

p {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: 50% 50%;}

При этом базовая точка изображения будет размещена так, что ее центр будет выровнен с центром ее элемента. Иначе говоря, процентные значения применяются и к элементу, и к исходному изображению. Рассмотрим процесс более подробно. Когда исходное изображение центрируется в элементе, точка изображения, которая может быть описана как 50% 50% (центр), выравнивается с точкой элемента, которая может быть описана аналогичным образом. Если изображение размещается в точке 0% 0%, то его верхний левый угол находится в верхнем левом углу области отступа элемента. Значение 100% 100% соответствует положению нижнего правого угла исходного изображения в нижнем правом углу области отступа:

p {background-image: url(oransqr.gif);
background-repeat: no-repeat;
padding: 5px; border: 1px dotted gray;}
p.c1 {background-position: 0% 0%;}
p.c2 {background-position: 50% 50%;}
p.c3 {background-position: 100% 100%;}
p.c4 {background-position: 0% 100%;}
p.c5 {background-position: 100% 0%;}

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

p {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: 33% 66%;}

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


Заметьте, что в процентных значениях горизонтальная координата всегда первая. Если в предыдущем примере поменять местами процентные значения, изображение окажется в точке, отстоящей на две трети ширины элемента и треть высоты. Если задано одно процентное значение, то оно используется как значение по горизонтали, а значение по вертикали принимается равным 50%. С ключевыми словами ситуация аналогичная: если задано только одно слово, то предполагается, что другое – center. Например:

p {background-image: url(yinyang.gif);
background-repeat: no-repeat;
background-position: 25%;}

Исходное изображение размещается на расстоянии четверти ширины области содержимого элемента и области отступа и половины их высоты. По умолчанию для свойства background-position устанавливается значение 0% 0%, что в функциональном плане аналогично top left. Вот почему, если не задать разные значения для определения местоположения, мозаичное размещение фоновых изображений всегда начинается с верхнего левого угла области отступа элемента..



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

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

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