Фоновые изображения CSS

Введение

Согласитесь! С первой лекции этого курса вам не терпелось узнать, как сделать свой сайт энергичным и привлекательным. Возможно, что вы даже перескочили вперед сразу к этому разделу?

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

Как было показано ранее в курсе, одним из самых важных изменений, которое произошло вместе с появлением CSS, стала возможность разделить презентацию, или способ представления информации, и семантику, или что она означает. Фоновые изображения CSS являются одним из самых важных инструментов, которые имеются в вашем распоряжении, так как позволяют применять декоративные изображения в определенных частям HTML, не добавляя ничего в код HTML. Ранее авторы были вынуждены заполнять свой код тегами img.

CSS, и в частности свойство background, сохраняет код HTML свободным от презентационной неразберихи. Перепроектирование и другие преобразования в жизни сайтов, создаваемые с помощью современных методов, можно тогда будет выполнить значительно легче. Вы сможете обновить весь сайт, изменяя только таблицу стилей, а не переписывая каждую страницу HTML. В зависимости от размера сайта это может оказаться существенным сохранением ресурсов.

В этой лекции рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью CSS, настройка их размещения, укладка их вертикально или горизонтально, и объединение фоновых изображений с помощью спрайтов CSS (http://www.alistapart.com/articles/sprites/) для улучшения производительности сайта (http://developer.yahoo.com/performance/index.html).

Лекция имеет следующую структуру:

Как это работает?

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

Сначала давайте узнаем немного больше об имеющихся в нашем распоряжении различных свойствах.

Свойства фона

Свойство	Определение	Описание
background-color	Задает цвет фона элемента HTML.	Существует несколько способов задания background-color, включая значения RGB и ключевые слова. Многие люди используют шестнадцатеричную запись, т.е. символ решетки (#) за которым следует шесть символов. Первая пара указывает уровень красного цвета, а вторая и третья указывают уровни зеленого и синего цветов соответственно - #RRGGBB. Многие инструменты выбора цвета помогают определить шестнадцатеричную запись заданного цвета. Чистый красный цвет, например, будет #FF0000. Допустимые значения включают color, transparent, или inherit.
image	Указывает путь доступа или URL фонового изображения.	Задает background-image, показывая браузеру, где найти изображение, используя URL. Например; url(alert.png). Отметим, что перед путем доступа стоит ключевое слово url, и он заключен в скобки. Такой синтаксис позволяет браузеру понять, что указано местоположение. Допустимые значения включают URL, none, или inherit.
repeat	Указывает, в каком направлении должно повторяться фоновое изображение.	Изображения могут повторяться вертикально, горизонтально или в обоих направлениях, чтобы заполнить всю ширину или высоту элемента HTML. Используйте background-repeat, чтобы приказать браузеру повторять фоновое изображение. Допустимыми значениями являются repeat, repeat-x, repeat-y, и no-repeat.
attachment	Задает поведение фонового изображения, когда пользователь выполняет прокрутку.	Изображения могут либо прокручиваться вместе с контентом, или оставаться на месте в видимой области экрана. Допустимые значения включают scroll, fixed, и inherit.
position	Сообщает браузеру, где разместить фоновое изображение.	Изображения могут выводиться в любом месте в границах элемента HTML, к которому они применяются. Используйте background-position для точного размещения изображений для визуальных эффектов и наложения слоев. Существует много полезных способов указания позиции фона, ключевые слова и числовые значения. Ключевые слова (такие как top и bottom ) очень полезны и легко читаются. Пиксельные значения очень точны, но не адаптируются к изменению высоты и ширины. Отрицательные значения пикселей будут полезны при использовании спрайтов CSS, как вы узнаете позже. При использовании процентов и пикселей начальной точкой всегда является верхний левый угол элемента HTML, хотя позиционирование изображений с помощью пикселей и процентов выполняется по разному. Пиксели всегда перемещают изображение на заданное число пикселей сверху и слева от содержащего бокса (или к нему, если они являются отрицательными значениями), независимо от размера изображения и содержащего бокса. Проценты же смещают изображение на указанный процент разницы между размером содержащего бокса и размером изображения. Если изображение и содержащий бокс имеют один размер, проценты вообще не будут смещать изображение. Допустимые значения включают length (обычно в пикселях), percentage (от ширины элемента), и ключевые слова top, right, bottom, left, и center. Отметим, что center можно использовать для указания как вертикального, так и горизонтального центра. Отметим также, что можно смешивать в правилах проценты и пиксели, но не ключевые слова и пиксели или ключевые слова и проценты.
background	Сокращенное свойство, которое можно использовать для описания всех других свойств в одной строке.	Сокращенные свойства на самом деле очень привлекательны. Большинство разработчиков используют их для создания минимального кода CSS и объединения в группы связанных свойств. Можно написать общее правило использования сокращения, и затем переопределить его необходимым образом с конкретными свойствами. Свойства всегда должны указываться в одном и том же порядке, чтобы позволить браузерам легко интерпретировать соответствующие стили: color url repeat attachment (очень редко используется; может опускаться) horizontal-position vertical-position Примером такого сокращения со всеми использованными свойствами (за исключением attachment ) будет следующий: background: green url(logo.gif) no-repeat left top;

Пример создания тревожного сообщения

Теперь, когда мы рассмотрели базовый синтаксис, перейдем к построению полного примера тревожного бокса, который продемонстрирует все аспекты фоновых изображений.

Дизайн

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

Отметим, что эскиз имеет одну строку текста, но может в будущем содержать больше. Одним из самых важных навыков разработчика Web является предвидение, как будет развиваться дизайн. Часть внимания профессионального видения сайта с самого начала проекта и до этапа перепроектирования должно уделяться единообразию. Поэтому тревожное сообщение может содержать более одной строки текста, или даже несколько параграфов, списков, или других элементов HTML. Необходимо пытаться быть как можно более независимым от элемента. Это повышает возможность повторного использования кода и делает сайт насколько возможно быстрым и эффективным. Эскиз выглядит, как показано на рисунке 31.1.

Дизайнер подготовил также специальную иконку, как показано на рисунке 31.2.

Код

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

Теперь перейдем к пошаговому рассмотрению примера. Поэкспериментируйте с кодом, увеличивая или уменьшая значения, и проверьте другие альтернативы. Можно также при желании последовать дальше, записывая каждую новую строку кода в таком инструменте, как Opera Dragonfly или Firebug, чтобы можно было сразу видеть результаты каждого шага.

Создание зацепки CSS, или селектора

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

CSS:

.alert { ... }

HTML:

<p class="alert">
  <strong>Alert!</strong> The text of our alert message goes here.
</p>

Здесь сигнал (alert) оформляется с помощью class, а не id, так как на странице может встречаться более одного сигнала, например, элемент формы с несколькими ошибками. Вы хотите сделать свой код CSS насколько возможно гибким и ограничиваете вещи в соответствии с дизайном при создании кода HTML.

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

Добавление цвета фона

Вы уже познакомились с использованием цвета фона при обработке текста в лекции 29 об оформлении текста с помощью CSS. Те же самые принципы применимы к любому элементу HTML и могут объединяться с фоновыми изображениями для создания визуальных эффектов. Если цвет фона не был задан и не был унаследован, то по умолчанию он будет прозрачным.

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

.alert{background-color: #FFFFCC;}

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

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

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

.alert{
  background-color: #FFFFCC;
  background-image: url(alert.png);
}

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

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

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

Чтение спецификаций может определенно быть устрашающим, но спецификация является на самом деле хорошим источником для выяснения, как должен работать 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.

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

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

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

body{background-repeat: repeat-x}

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

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

С другой стороны задание ). Прокрутите страницу вниз, и изображение останется вверху слева. Оно присоединено к элементу body, поэтому всегда видно.

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

.alert{
  background-color: #FFFFCC;
  background-image: url(alert.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

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

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

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

Рисунок 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.

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

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

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

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

Эксперименты с кодом

Лучший способ запомнить все тонкости CSS — проверить все возможности самостоятельно. Попробуйте изменить некоторые свойства в примере и посмотреть, как это на него повлияет. Задайте background-position как 100% 100%, и обратите внимание, что это создает такой же результат, как и использование ключевых слов right и bottom. Что если изменить их на -5px 0? Почему вы не можете теперь видеть часть изображения?

Тестирование качества

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

Строгое тестирование является частью изучения CSS. Чем более внимательны вы будете при изучении, тем быстрее научитесь работать с CSS.

Спрайты

Пользователи хотят все и сразу. Они хотят, чтобы сайт был эффектным, интерактивным, а также быстрым, однако включение большого числа фоновых изображений CSS может существенно замедлить работу сайта — чем больше делается запросов HTTP, тем медленнее будет сайт (запрос HTTP выполняется, когда компьютер обращается к Web-сайту и должен просить у сервера прислать дополнительные объекты, которые составляют сайт, такие как файл CSS или изображение — каждый дополнительный запрос означает более длительное время загрузки сайта). Чтобы обойти это ограничение можно объединить связанные иконки в одно изображение, называемое спрайтами CSS (http://www.alistapart.com/articles/sprites). Свойство background-position позволяет затем помещать это изображение в соответствующие позиции, так что иконки выводятся через окно элемента HTML, к которому присоединены спрайты CSS.

Например, на рисунке 31.13 можно видеть, что для вывода иконки Земли через окно HTML можно разместить изображение с помощью left top. Чтобы сместить позицию изображения, чтобы выводилась иконка тревожного сигнала, позицию фонового изображения необходимо изменить на -80px 0. Отрицательное горизонтальное значение смещает изображение влево.

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

Давайте посмотрим, как спрайты CSS можно использовать для создания интересного эффекта. Предположим, что дизайнер прислал новый эскиз. Он предназначен для списка ссылок на основной странице блога. Он указывает на профиль блоггера LinkedIn, ленту RSS, фотографии Flickr, и закладки. Посмотрев на ссылки мы поняли, что имеется градиент, начинающийся в центре как белый цвет и превращающийся в серый вверху и внизу ссылки, и, чтобы усложнить все еще больше, дизайнер попросил, не могли бы мы сделать каждую ссылку чисто белой без особенностей, когда посетители наводят на нее указатель мыши — посмотрите на рисунок 31.14.

Логотипы можно было бы включить в разметку с помощью элементов img, однако использование спрайтов CSS является значительно лучшим способом — спрайты загружаются быстрее и нужно загружать только одно изображение (а не четыре), и это снижает путаницу в коде HTML, уменьшая объем необходимой разметки.

Создание спрайта

Первый шаг состоит в разрезании четырех логотипов и создании множества спрайта, как показано на рисунке 31.15.

Необходимо также отрезать полосу шириной 1 пиксель от градиента. Чтобы было легче видеть, я отрезала несколько более широкую полосу, но требуется только один пиксель - см. рисунок 31.16.

Код HTML для списка является неупорядоченным списком, содержащим ссылки. Отметим пустой элемент span внутри ссылок. Очень важно не использовать фиксированные height и width на элементах, которые содержат текст - в конце концов, мы не имеем никакого представления о том, каким будет текст. Что произойдет, если сайт будет переведен на немецкий язык? Можно использовать эти дополнительные span для вывода логотипов. В качестве альтернативы можно было бы решить, что вы не хотите иметь лишнюю несемантическую разметку в коде HTML. В этом случае нужно будет использовать спрайт большего размера и оставить пустое пространство между иконками. Помните, что это будет медленнее для пользователей на медленных соединениях, особенно для мобильных телефонов. Код списка выглядит следующим образом — добавьте его в шаблон HTML:

<ul class="navigation">
  <li id="resume">
    <a href="#"><span></span>Resume</a>
  </li>
  <li id="rss">
    <a href="#"><span></span>RSS Feed</a>
  </li>
  <li id="photos">
    <a href="#"><span></span>Photos</a>
  </li>
  <li id="links">
    <a href="#"><span></span>Links</a>
  </li>
</ul>

Код CSS будет использовать оба фоновых изображения. Прежде всего, посмотрите на изображение фонового градиента. Нужно отметить три интересных момента:

Добавьте следующий код CSS в новый файл CSS и соедините его с файлом HTML:

.navigation, .navigation li {
  margin:0; 
  padding:0;
}

.navigation li {
  border-top: 1px solid white;
  list-style-type:none
}

.navigation li a {
  background: #E2E2E2 url(sprite_gradient_bkg.png) repeat-x left center; 
  padding:20px; 
  display:block;
  font-family: Arial, Helvetica, sans-serif;
  color:#333; 
  font-size:18px; 
  text-decoration:none
}

/* hover effects */

.navigation li a:hover, .navigation li a:focus{
  background: transparent none;
}

Последняя строка означает, что элемент не должен иметь фоновый цвет или изображение, когда пользователь наводит на нее указатель мыши, или фокус клавиатуры. Возможно вы удивляетесь, почему свойства фона применяются к ссылке, а не к элементу списка? Ответ состоит в том, что Internet Explorer 6 и более ранние версии не поддерживают псевдо-классы, такие как hover, на элементах, отличных от ссылок. Я сделала соответствующее изменение, чтобы учесть это ограничение.

Затем можно создать код CSS для маленьких логотипов. Как обычно, можно начать с определения наиболее общего случая для всех элементов span в модуле навигации. Именно здесь определяется изображение, которое будет использоваться всеми span, повторение, и положение фонового изображения (каждое по другому, поэтому давайте использовать первое). Для этого правила можно использовать сокращение. Отметим, что комментарии CSS используются для выделения разделов кода в управляемые отрывки. Добавьте следующий код внизу файла CSS:

/* общий случай */

.navigation span {
  background:url(sprite_logo.png) no-repeat left top;
  height:15px;
  width: 15px; 
  margin-right:20px;
  display:-moz-inline-box; 
  display:inline-block;
}

Имея общий случай, теперь можно определить исключения, или что отличает каждый отдельный логотип. В данном случае в CSS изменяется только background-position. Каждая соответствующая позиция списка должна содержать изображение со смещением на 15 пикселей влево, так как каждый логотип имеет в ширину 15 пикселей. Добавьте следующий код внизу файла CSS:

/* исключения */

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}

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

Поэкспериментируйте со значениями позиции фонового изображения в законченном примере, чтобы лучше понять, как настраивать позиции спрайтов.

Заключение

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

Сведения об авторах изображений

The Tiles (http://www.flickr.com/photos/dimsumdarren/1342305614/), DimsumDarren little glass tiles (http://www.flickr.com/photos/emdot/6099842/), emdot

Контрольные вопросы

blockquote{background: yellow url(quote.png) no-repeat scroll ____ ____ ;}

Дополнительное чтение

Об авторе