Значения, заданные в единицах измерения длины

И наконец, обратимся к позиционированию с помощью значений, заданных в единицах измерения длины. Если местоположение исходного изображения задано в единицах длины, то они интерпретируются как смещения от верхнего левого угла области отступа элемента. Точка, относительно которой отсчитываются смещения, – верхний левый угол исходного изображения. Таким образом, если заданы значения 20px 30px, верхний левый угол исходного изображения будет сдвинут на 20 пикселов вправо и 30 пикселов вниз относительно верхнего левого угла области отступа элемента:

p {background-image: url(yinyang.gif);
background-repeat: no-repeat;
background-position: 20px 30px;
border: 1px dotted gray;}

В случае применения процентных значений все не так, поскольку происходит смещение одного верхнего левого угла относительно другого. Иначе говоря, верхний левый угол исходного изображения совмещается с точкой, заданной свойством background-position. Однако можно комбинировать значения, заданные в единицах длины, с процентными значениями, чтобы воспользоваться преимуществами обоих подходов. Скажем, требуется, чтобы фоновое изображение всегда находилось в правой части элемента на 10 пикселов ниже верхней границы.


Как обычно, значение по горизонтали расположено первым:

p {background-image: url(bg23.gif);
background-repeat: no-repeat;
background-position: 100% 10px;
border: 1px dotted gray;}

В версиях CSS до 2.1 нельзя было сочетать ключевые слова с другими значениями. Таким образом, значение top 75% не было допустимым, и если указывалось ключевое слово, то приходилось везде придерживаться только ключевых слов. CSS2.1 изменил это, чтобы упростить создание таблиц стилей и чтобы не отставать от других броузеров, в которых это уже разрешено. Значения длины или процентные значения могут быть отрицательными, благодаря чему можно поместить исходное изображение вне области фона элемента. Рассмотрим пример с применением в качестве фона очень большого символа инь-ян. Мы уже центрировали его, но теперь нам надо, чтобы в верхнем левом углу области отступа элемента была видна только его часть. Нет проблем, по крайней мере, теоретически.

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

p {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: -200px -200px;
border: 1px dotted gray;}

Или, скажем, требуется, чтобы видимой и центрированной в элементе была лишь его правая половина:

p {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: -150px 50%;
border: 1px dotted gray;}

Теоретически возможны также и отрицательные значения процентных значений, хотя тут есть две трудности.


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

p {background-image: url(pix/bigyinyang.gif);
background-repeat: no-repeat;
background-position: -10% -10%;
border: 1px dotted gray;
width: 500px;}

Правило предусматривает, что точка, находящаяся вне границ изображения, определяемая значением –10% –10%, должна быть выровнена с аналогичной точкой абзаца. Размер изображения составляет 300× 300 пикселов, и мы знаем, что точка, по которой будет выравниваться изображение, расположена на 30 пикселов выше верха изображения и на 30 пикселов влево от его левого края (фактически –30px и –30px). Все абзацы имеют одинаковую ширину (500px), поэтому точка горизонтального выравнивания отстоит на 50 пикселов от левого края их областей отступа. Это значит, что левый край каждого изображения будет смещен на 20 пикселов влево от края левого отступа абзацев.


Дело в том, что точка выравнивания изображений (–30px) выравнивается с точкой с координатой –50px абзаца. Разница между этими двумя точками составляет 20 пикселов.

Однако высота абзацев разная, поэтому точка вертикального выравнивания меняется для каждого абзаца. Если высота абзаца равна 300 пикселам, то верх исходного изображения будет выровнен точно по верху области отступа элемента, потому что оба будут иметь точки вертикального выравнивания с координатой –30px. Если высота абзаца равна 50 пикселам, то координата его точки выравнивания была бы –5px, и верх исходного изображения был бы на самом деле на 25 пикселов ниже верха области отступа. Такие же проблемы могут возникнуть при задании положительных процентных значений. Представьте, что произошло бы, если бы вы выровняли исходное изображение по низу элемента, ширина которого меньше ширины изображения, хотя я не говорю, что вы не должны использовать отрицательные значения. Это просто напоминание, что, как всегда, есть вопросы, на которые следует обратить внимание.

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

p {background-image: url(bigyinyang.gif);
background-position: -150px 50%;
border: 1px dotted gray;}

Итак, когда фон повторяется начало мозаичного шаблона задается свойством background position. Это еще раз иллюстрирует понятие исходного изображения, очень важное для усвоения следующего раздела.

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

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

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