Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







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





Теперь добавим в сигнал изображение. Путь доступа к фоновому изображению необходимо поместить в 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}

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

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. Здесь не так много отличий.







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

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...





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


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.