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

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

Бокс сигнала будет теперь выглядеть как на рисунке 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.

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

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

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

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

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

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

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

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

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

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: