Присоединение

attachment позволяет определить, как ведет себя фоновое изображение, когда пользователь прокручивает страницу. Поведением по умолчанию является scroll, которое заставляет фоновое изображение прокручиваться вместе с контентом.

С другой стороны задание background-attachment как fixed, заставляет фоновое изображение приклеиться к окну браузера, так что оно остается в одном и том же месте, когда прокручивается контент внутри элемента, с которым оно соединено. Это создает несколько странный эффект, так как изображение будет видно, только когда элемент HTML, с которым оно соединено, прокручивается над ним. W3C использует это для пометки статуса своих спецификаций, например, изображение "W3C Candidate Recommendation" вверху слева (http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat). Прокрутите страницу вниз, и изображение останется вверху слева. Оно присоединено к элементу body, поэтому всегда видно.

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

.alert{

background-color: #FFFFCC;

background-image: url(alert.png);

background-repeat: no-repeat;

background-attachment: scroll;

}

Как показано на рисунке 31.9, визуальное представление бокса сигнала не слишком отличается от того, что было раньше.

Рис. 31.9.  Здесь не так много отличий.

Позиционирование изображения

Позиционирование является тонкой настройкой, которая позволяет поместить фоновое изображение в элементе HTML точно там, где вы хотите его видеть, как по горизонтали, так и по вертикали. Это свойство принимает ключевые слова и числовые значения, такие как top, center, right, 100%, -10%, 50px и -30em.

Рисунок 31.10 показывает значения, которые можно использовать, чтобы поместить фоновые изображения в различные позиции.

Рис. 31.10.  Различные примеры позиций фонового изображения, использующие ключевые слова, проценты, и пиксели.

Давайте зададим позицию фонового изображения. Мы хотим, чтобы оно размещалось в левом верхнем углу, но не касалось сторон, поэтому нужно сместить его на 10 пикселей сверху и слева — это можно сделать добавляя следующую выделенную строку в правило CSS. Сделайте это теперь.

.alert{

background-color: #FFFFCC;

background-image: url(alert.png);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: 10px 10px;

}

Первое значение является горизонтальным смещением, а второе вертикальным. В данном случае они совпадают. Бокс сигнала должен теперь выглядеть как на рисунке 31.11.

Рис. 31.11.  Использование позиционирования для размещения фонового изображения.

Совет. Придерживайтесь либо ключевых слов, либо числовых значений - более старые браузеры могут игнорировать ваше объявление, если одновременно использовать оба вида записи. Использование right и bottom будет обеспечивать тот же результат, что и 100% по горизонтали или вертикали, соответственно.

Использование сокращения для общего объединения

Как вы уже видели, некоторые свойства CSS можно объединять в группу. Фон и все его отдельные свойства находятся среди них. Написанный до сих пор код CSS можно переписать в сокращенной форме следующим образом.

.alert{background: #FFFFCC url(alert.png) no-repeat scroll 10px 10px;}

Совет. При объединении отдельных свойств фона в группу, всегда размещайте свойства в следующем порядке - это важно как для межбраузерной совместимости, так и для организации и обслуживания таблицы стилей:

1. цвет

2. изображение

3. повторение

4. присоединение

5. горизонтальная позиция

6. вертикальная позиция

Попробуйте заменить старый код CSS показанными выше сокращением, и пример будет выглядеть точно также — см. рисунок 31.12.

Рис. 31.12.  Сокращение работает прекрасно!