Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
185
Добавлен:
10.05.2015
Размер:
1.14 Mб
Скачать

Применение фонового изображения

Теперь добавим в сигнал изображение. Путь доступа к фоновому изображению необходимо поместить в url(), как показано в коде ниже. Добавьте выделенную строку в правило CSS.

.alert{

background-color: #FFFFCC;

background-image: url(alert.png);

}

Бокс сигнала будет теперь выглядеть как на рисунке 31.4.

Рис. 31.4.  Было добавлено фоновое изображение, но укладка выглядит ужасно.

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

Управление повторением фонового изображения

Рис. 31.5.  Почти как наше фоновое изображение, эти плитки повторяются по горизонтали и вертикали.

Чтение спецификаций может определенно быть устрашающим, но спецификация является на самом деле хорошим источником для выяснения, как должен работать CSS, прежде чем погружаться в бесчисленные различия браузеров. Взгляните на раздел цвета и фона Спецификации CSS 2.1 W3C (http://www.w3.org/TR/CSS21/colors.html) и попробуйте найти ключевое слово, которое надо использовать, когда не требуется, чтобы фоновое изображение повторялось. Мы будем использовать его в примере ниже.

Обратите внимание, что имеется раздел для каждого свойства фона, включая background-repeat. В секции Value вы увидите все возможные варианты значений, включая repeat, repeat-x, repeat-y, no-repeat, и inherit. По умолчанию (в начале) фоновые изображения задаются повторяющимися. Никакое направление не определяется, поэтому изображение будет повторяться по горизонтали и по вертикали. Вполне можно догадаться, что no-repeat является значением, которое требуется использовать, чтобы изображение не повторялось в любом направлении. Добавьте следующую выделенную строку в правило CSS.

.alert{

background-color: #FFFFCC;

background-image: url(alert.png);

background-repeat: no-repeat;

}

Бокс сигнала будет теперь выглядеть как на рисунке 31.6.

Рис. 31.6.  Бокс сигнала с одной копией фонового изображения (без повторения).

Вам не нужно знать размер элемента HTML, вы просто отрезаете ломтик от своего градиента и заставляете его повторяться в требуемом направлении; либо x для горизонтального, либо y для вертикального. Кроме того, можно выбрать повторение в обоих направлениях (как кухонная плитка) или ни в каком направлении. Градиенты часто повторяют горизонтально или вертикально (см. рисунок 31.7), шаблоны часто повторяют в обоих направлениях, а иконки обычно не повторяют. Мы исследуем background-repeat дополнительно в примере ниже.

Рис. 31.7.  Зеленовато-желтые плитки в этом примере повторяются только горизонтально.

Давайте посмотрим на реальный пример с моего Web-сайта - посмотрите на рисунок 31.8.

Рис. 31.8.  Пример повторения с моего собственного Web-сайта.

Код CSS, который использовался для добавления этого декоративного эффекта, является относительно простым. Я сделала горизонтальное повторение фонового изображения с помощью repeat-x:

body{background-repeat: repeat-x}