252 Часть 2. Применение CSS
Float
— выравнивание изображения с помощью float перемещает его к левому или правому краю веб-страницы. Или, если изображение расположено внутри другого блочного элемента, например боковой панели, — к левой или правой стороне этого элемента. Таким образом, текст и другие элементы веб-страницы обтекают изображение с другой, свободной стороны и отображаются далее под ним. Вы можете создать многократное обтекание рисунков для отображения фотогалереи в несколько строк и столбцов.
Margin
— чтобы добавить пустой промежуток между изображением и остальным содержимым веб-страницы, используйте свойство margin
. Когда вы устанавли- ваете для изображения обтекание, текст обычно располагается слишком близко.
Добавление левого поля (с выравниванием по правому краю) или правого поля
(с выравниванием по левому краю) создает пустой отделяющий промежуток между текстом и графическим элементом.
В большинстве случаев вам не потребуется создавать стиль для самого тега
![]()
. Его форматирование затрагивает слишком большой диапазон элементов веб-страницы и изменит все изображения, включая элементы, обеспечивающие совершенно разные функции. Так, наряду с изображениями одинаковое форма- тирование будут иметь логотип, навигационные кнопки, фотографии и даже ре- кламные баннеры. Наверное, вы не хотели бы видеть одну и ту же черную рамку, обрамляющую все изображения. Вместо этого следует использовать стилевые классы, например
.galleryImage или
.logo
, для применения стилей к нужным эле- ментам выборочно.
Другой подход заключается в использовании селекторов потомков для целево- го форматирования изображений, сгруппированных в одном фрагменте веб- страницы. Если у вас есть галерея фотографий, можно заключить все внутри тега
с классом gallery и затем создать стиль только для изображений, располо- женных внутри этого блока, так:
.gallery img
Добавление фоновых изображенийСвойство background-image
— ключ к созданию визуально ошеломляющих сайтов.
Стоит только научиться применять его и родственные свойства, и вы сможете заставить сайт выделяться среди прочих. Чтобы убедиться в эффективности фо- новых изображений, зайдите по адресу http://www.csszengarden.com
. HTML-код обеих веб-страниц, показанных на рис. 8.1, совершенно одинаков, визуальные раз- личия достигаются благодаря использованию фоновых изображений.
Весь секрет в том, чтобы сделать любую веб-страницу уникальной в плане ди- зайна, и для достижения этой цели широкое распространение получили фоновые изображения (на самом деле, если вы посмотрите на HTML-код этих веб-страниц, вы увидите, что в них нет ни единого тега
![]()
).
Если вы уже создавали сайты раньше, то, наверное, использовали изображения в качестве фоновых рисунков веб-страниц. Скорее всего, они были небольших раз- меров, повторяющиеся на заднем плане окна браузера, с едва различимым узором.
Этот проверенный временем метод языка HTML применял атрибут background тега
. CSS
сделает все то же самое, но гораздо лучше.
Глава 8. Добавление графики на веб-страницы
253
Рис. 8.1. Сайт csszengarden.com демонстрирует мощность каскадных таблиц стилей, показывая, как с помощью CSS вы можете превратить один и тот же HTML-файл в две совершенно разные веб-страницы
254
Часть 2. Применение CSS
ПРИМЕЧАНИЕ
Далее в книге вы найдете описание трех свойств фоновых изображений и изучите CSS-код каждо- го из них. Позже в этой главе вы познакомитесь с сокращенным методом набора — вариантами свойств, которые сэкономят немало времени.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
GIF-, JPEG- и PNG-файлы: веб-графика
Компьютерная графика представлена сотнями раз
личных форматов файлов с такими замысловатыми аббревиатурами, как JPEG, GIF, TIFF, PICT, BMP, EPS и т. д.
К счастью, вебграфика немного проще. Современные браузеры работают только с тремя графическими фор
матами: GIF, JPEG и PNG. Каждый из них обеспечивает хорошее сжатие. Благодаря возможностям компьютера сжатие уменьшает размер графического файла, и тот может «путешествовать» по Интернету быстрее. Какой из этих форматов лучше выбрать, зависит от изображе
ния, которое вы хотели бы добавить на свою страницу.
GIF (Graphics Interchange Format). Такие файлы обеспечивают хорошее сжатие для изобра
жений, в которых есть области со сплошным цветом: логотипы, текст, простые баннеры и т. д. GIFфайлы также предоставляют возможность установить один из цветов прозрачным, а это означает, что вы можете сделать так, чтобы какойнибудь цвет исчез, позволяя фону вебстраницы быть видным на части изобра
жения. Кроме того, GIFизображения могут включать в себя простую анимацию.
Изображения GIF содержат максимум лишь 256 оттен
ков, вследствие чего фотографии обычно выглядят па
стеризованными (пятнистыми и нереалистичного цвета, как плакат). Другими словами, фото заката, которое вы сделали цифровой камерой, в формате GIF будет выгля
деть не очень хорошо. Если вам не нужно анимировать изображение, то формат PNG8, который мы обсудим ниже, будет лучшим выбором, по сравнению с GIF.
JPEG (Joint Photographic Experts Group).
Такая графика имеет сильные стороны там, где у GIF наблюдаются недостатки. Изображения JPEG могут содержать миллионы различных цветов, что делает их идеальными для фотографий. Однако файлы JPEG имеют преимущества не только в плане фотографий.
Они способны сжимать изображения с множеством различных цветов гораздо лучше, чем GIF, потому что алгоритм сжатия JPEG предусматривает то, как чело
веческий глаз воспринимает смежные значения цве
тов. Когда графическое приложение сохраняет файл
JPEG, происходит комплексный анализ цвета с целью снижения объема данных, необходимых для точно
го представления образа. С другой стороны, сжатие
JPEG приводит к тому, что текст и большие площади со сплошным цветом покрываются пятнами.
Наконец, формат PNG (Portable Network Gra-
p hics) включает в себя лучшие черты GIFи JPEG
форматов, но вы должны узнать, какую именно версию
PNG использовать в конкретной ситуации. PNG8 в основ
ном заменяет GIF. Как и GIF, он предлагает 256 цветов и базовую возможность сделать один цвет прозрачным.
Тем не менее, PNG8 обычно сжимает изображения и де
лает их размер несколько меньшим, чем GIF. По этой причине изображения PNG8 загружаются чуть быстрее, чем такие же изображения, сохраненные в формате GIF.
То есть лучше использовать PNG8, а не GIF.
PNG24 и PNG32 (также известный как
PNG24 с альфа- прозрачностью
) предлагают расширенную цвето
вую палитру JPEGизображений без потери качества.
Это означает, что фотографии сохраняются в форматах
PNG24 или PNG32 и, как правило, имеют более высокое качества, чем JPEG. Но прежде, чем перейти к формату
PNG, следует помнить, что изображения JPEG предлага
ют очень хорошее качество и гораздо меньший размер файла, чем PNG24 либо PNG32. В общем, JPEG является лучшим выбором для фотографий и других изображе
ний, которые состоят из множества цветов.
Однако PNG32 имеет одну особенность, которой нет у других форматов: это 256 уровней прозрачности (также называемой альфа-прозрачностью
). Она позволяет оформить фон вебстраницы как тень или задать для графики прозрачность 50 %, чтобы можно было видеть чтолибо сквозь нее, создавая эффект полупрозрачности.
Глава 8. Добавление графики на веб-страницы
255
Свойство background-image добавляет рисунок в качестве фона элемента. Чтобы поместить его на заднем плане всей веб-страницы, можно создать стиль для тега
:
body { background-image: url(images/bg.gif);
}
Свойство принимает единственное значение: ключевое слово url
, за которым следует путь к файлу рисунка, заключенный в круглые скобки. Вы можете исполь- зовать абсолютный URL, например, так:
url(http://www.cosmofarmer.com/image/bg.gif)
Или относительный путь от документа или корневого каталога сайта:
url(../images/bg.gif) /* относительный путь от документа */
url(/images/bg.gif) /* относительный путь от корневого каталога */
Как описывается в следующей врезке — «Информация для новичков. Типы
URL», — относительный путь от документа указывает адрес файла таблицы стилей, но не стилизуемой HTML-страницы. Конечно, они будут совпадать при использо- вании вну тренней таблицы, но вы должны помнить об этом, применяя внешнюю таблицу стилей. Предположим, у вас имеется папка styles
(содержащая таблицы стилей сайта) и папка images
(с изображениями сайта). Обе расположены в главном
(корневом) каталоге вместе с начальной (домашней) страницей сайта (рис. 8.2).
Когда посетитель просматривает ее, загружается также внешняя таблица стилей
(шаг 1 на рис. 8.2).
Рис. 8.2. Относительный путь от документа вычисляется применительно к файлу таблицы стилей, но не к стилизуемой веб-странице
Теперь допустим, что таблица включает стиль
с атрибутом фонового изо- бражения, в котором в качестве рисунка выбран файл bg.gif из папки images
. От- носительный путь к документу приведет от таблицы стилей к рисунку (шаг 2 на рис. 8.2). Это будет выглядеть следующим образом:
body { background-image: url(../images/bg.gif);
}
256
Часть 2. Применение CSS
Этот путь интерпретируется так:
../
означает «подняться вверх на один уровень», то есть к корневому каталогу, к папке, содержащей папку styles
;
images
/ означает «перейти к папке с изображениями images
»;
bg.gif определяет сам файл изображения.
В приведенных примерах путь не заключен в кавычки, как требует HTML; они необязательны, хотя и могут указываться. В CSS все три следующих строки кода идентичны:
background-image: url(images/bg.gif);
background-image: url("images/bg.gif");
background-image: url('images/bg.gif');
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
Типы URL
В CSS при добавлении фонового изображения или при
соединении внешней таблицы стилей директивой
@import вы должны определить URL: Uniform Resource
Locator (унифицированный указатель ресурса, URL
адрес) — путь к файлу, расположенному в Интернете.
Существует три типа путей: абсолютный, относитель
ный от корневого каталога и относительный от доку
мента. Все три варианта просто указывают, где браузер может найти определенный файл (например, другую вебстраницу, рисунок или внешнюю таблицу стилей).
Абсолютный путь похож на почтовый адрес — он содержит всю информацию, необходимую браузеру для нахождения файла. Абсолютный путь включает http://,
имя компьютера (хоста) в сети, папку и название самого файла. Например: http://www.cosmofarmer.
com/images/bluegrass.jpg
Корневой относительный путь
(относительный путь от корневого каталога) указывает, где находит
ся файл самого верхнего уровня — корневой папки сайта. Он не содержит ни http://
, ни доменного имени.
Начинается с символа
/
(слеш), указывающего на кор
невой каталог сайта (папка, в которой располагается главная страница). Например,
/images/bluegrass.
jpg обозначает, что файл bluegrass.jpg находится в папке images,
которая расположена в корневом ка
талоге. Самый простой способ определить корневой относительный путь — взять абсолютный и отбросить http://
и имя хоста.
Относительный от документа определяет путь к файлу от текущего документа. Когда он указан в та
блице стилей, он определяет путь до указанного файла от таблицы стилей, а не от текущей вебстраницы.
Вот несколько подсказок относительно того, какой тип URL нужно использовать в каждом конкретном случае.
• Если вы обращаетесь к файлу, который находится на сервере, отличном от того, где размещена ваша та
блица стилей, то должны использовать абсолютный путь. Это единственный тип URL, который может указывать на другой сайт.
• Корневой относительный путь хорош для доступа к изображениям, хранящимся на вашем собствен
ном сайте. Поскольку отсчет всегда начинается с корневого каталога, вы можете перемещать та
блицу стилей в любое другое место, не затрагивая при этом пути от корневого каталога до изображе
ний сайта. Однако этот способ трудно применять, если вы только учитесь вебдизайну: вы не сможете воспользоваться предварительным просмотром в браузере, пока не будете просматривать страни
цы через сервер в Интернете или установленный на компьютере для тестирования и отладочных целей. Другими словами, если вы попытаетесь просто открыть вебстраницу в своем компьютере с помощью меню
File
Open
(ФайлОткрыть),
Глава 8. Добавление графики на веб-страницы
257
то вообще не увидите никаких изображений, ко
торые помещены на вебстраницу с применением относительного пути от корневого каталога.
• Использование относительного пути от докумен
та — лучший способ разработки вебдизайна на собственном компьютере, без помощи сервера в Интернете. Вы можете создать CSSфайлы и затем просмотреть их в браузере, просто открывая стра
ницу, сохраненную на жестком диске компьютера.
Они будут работать и тогда, когда вы загрузите их на рабочий сайт, но вам придется переписать URL к изображениям, если вы захотите переместить таблицу стилей в другое место на сервере.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
Управление повтором фоновых изображений
Если свойство background-image используется само по себе, фоновый рисунок мно- гократно повторяется в виде мозаики, заполняя всю веб-страницу (в современном стандарте HTML эта недоработка исключена). К счастью, можно применить свойс- тво background-repeat
, чтобы определить, каким образом будет повторяться фоновый рисунок (и будет ли он повторяться вообще):
background-repeat: no-repeat;
Свойство может принимать четыре значения. Рассмотрим их по порядку.
repeat
— параметр по умолчанию, обеспечивает повторное отображение фоново- го рисунка слева направо и сверху вниз, до полного заполнения всего простран- ства веб-страницы (рис. 8.3).
Рис. 8.3. Применяйте повторное отображение фоновых рисунков с осторожностью: выбирайте не слишком контрастные, плавно стыкующиеся изображения (слева); четкие, яркие, высококонтрастные изображения (справа) делают основной текст веб-страниц нечитаемым
258
Часть 2. Применение CSS
no-repeat
— отображает фоновый рисунок один раз, без повторения и перекры- тия. Этот параметр используется на практике довольно часто, и мы также будем применять его для установки фоновых изображений тегов, отличных от
Вы можете пользоваться им, чтобы поместить графический логотип вверху веб- страницы или создать собственные маркеры в списках (пример такого маркера приведен в обучающем уроке 2 этой главы).
repeat-x
— вызывает повторение фонового изображения горизонтально вдоль оси Х (по всей ширине веб-страницы). Это замечательное средство для добав- ления графического баннера (заголовка) сверху веб-страницы (рис. 8.4, слева), декоративной границы сверху или снизу заголовка.
repeat-y
— повторяет фоновое изображение вертикально вдоль оси Y (по всей высоте веб-страницы). Вы можете использовать этот параметр, чтобы добавить слева или справа веб-страницы графическое навигационное меню (см. рис. 8.4,
справа) или создать теневой эффект с любой стороны элемента веб-страницы
(возможно, той же боковой панели).
Рис. 8.4. Пользуясь возможностью управления повтором фоновых изображений, можно создать графический фон для заголовков (слева) и боковых панелей (справа) веб-страницы
Позиционирование фоновых изображений
Размещение фоновых изображений и управление их повтором — это только поло- вина дела. CSS-свойство позиционирования фонового изображения background- position позволяет управлять точным расположением несколькими способами. Вы можете определить начальную позицию фонового изображения в виде горизон- тальной и вертикальной координат посредством трех ключевых слов, точных аб- солютных и процентных значений.
Ключевые слова
Можно работать с двумя наборами ключевых слов: один из них имеет три парамет- ра управления горизонтальным позиционированием: left
, center
, right
, а другой — три параметра вертикального позиционирования: top
, center
, bottom
(рис. 8.5).
Глава 8. Добавление графики на веб-страницы
259
Предположим, вы хотите поместить рисунок прямо в центре веб-страницы. Для этого можно создать следующий стиль:
body {
background-image: url(bg_page.jpg);
background-repeat: no-repeat;
background-position: center center;
}
Чтобы переместить его в верхний правый угол веб-страницы, просто измените параметр позиции фонового рисунка:
background-position: right top;
Рис. 8.5. Вы можете использовать для позиционирования фоновых изображений ключевые слова, последовательность написания которых не имеет значения
ПРИМЕЧАНИЕ
Если вы решили применить повторяющееся фоновое изображение (установив для свойства background-repeat одно из значений, описанных ранее), то начальную точку или координату первого отображаемого фонового рисунка определит свойство background-position. Например, если вы примените параметр repeat, то весь фон веб-страницы будет заполнен фоновым рисун- ком. Но именно background-position укажет, с какой позиции нужно начать повторное отобра- жение.
Ключевые слова полезны, когда необходимо создать вертикальные или гори- зонтальные баннеры-заголовки. Если вы хотите, чтобы фоновый рисунок был го- ризонтально центрирован и повторялся от верхнего до нижнего края веб-страницы,
260
Часть 2. Применение CSS
создавая фон для всего содержимого (рис. 8.6, слева), то можете выполнить следу- ющий стиль:
body {
background-image: url(background.jpg);
background-repeat: repeat-y;
background-position: center top;
}
Рис. 8.6. При повторении фонового изображения вертикально (слева) или горизонтально
(справа) пользуйтесь свойством background-position
Аналогично, применяя ключевые слова bottom
, center и top
, вы можете установить горизонтальное повторение фонового изображения в определенном месте веб-стра- ницы (или внутри стилизуемого элемента) и при использовании параметра repeat-x
(см. рис. 8.4, слева).
На рис. 8.6, слева, фоновое изображение представляет собой широкий белый блок с тенями с левой и правой сторон. Цвет фона веб-страницы — серый, и текст выглядит так, как будто он написан на белом листе бумаги, лежащем на экране компьютера.
СОВЕТ
На самом деле вы можете добавить фоновый рисунок к обоим тегам: и . Если вы повторяете оба изображения по горизонтали и располагаете рисунок тега вверху, а изо- бражение тега внизу, то можете достичь эффекта двух полосок, идущих через верхнюю и нижнюю части страницы, вне зависимости от высоты страницы. Это работает во всех современных браузерах, даже в Internet Explorer 6!
ОШИБКИ БРАУЗЕРОВ
Проблема с отображением фоновых рисунков
в нижней части окна браузера Firefox
Отображая рисунок в качестве фона всей веб
страницы, Firefox не всегда правильно устанавли
вает вертикальное позиционирование изображе
ния. Например, если вы используете вертикальную позицию bottom
, изображение не всегда появля
ется в нижней части окна браузера. Это случается,
Глава 8. Добавление графики на веб-страницы
261
когда основное содержимое вебстраницы мень
ше по высоте.
Если вебстраница имеет всего несколько абзацев текста и отображается на большом мониторе, то
Firefox принимает за нижний край окна браузера bottom нижний край последнего абзаца текста веб
страницы. Если вы столкнетесь с такой ситуацией, то просто добавьте следующий стиль: html { height:
100 %; }
ОШИБКИ БРАУЗЕРОВ
Точные значения
Позиционировать фоновые изображения можно, используя точные значения в пикселах или em. При этом нужно указать два значения: одно из них опреде- ляет расстояние между левой стороной изображения и левым краем элемента- контейнера, а другое — расстояние между верхней стороной изображения и верх- ним краем элемента-контейнера (другими словами, первое значение указывает горизонтальную координату, а второе — вертикальную).
Допустим, вы хотите установить собственные маркеры для списка. При добав- лении в тег
фонового рисунка маркеры не всегда будут отображатся правиль- но центрированными на строке (рис. 8.7, вверху). Придется выровнять маркеры списка посредством свойства позиционирования фонового рисунка (см. рис. 8.7,
внизу). В нашем случае элементы списка будут выглядеть гораздо симпатичнее, если расположить маркеры на 5 пикселов правее и на 8 пикселов ниже. Для этого добавим в стиль фонового изображения следующее свойство:
background-position:5px 8px;
Рис. 8.7. Использование собственных изображений маркеров для списков иногда требует их точного позиционирования так, чтобы они имели соответствующее центрирование и правильно отображались относительно текста элементов списка
Нельзя указывать расстояние относительно нижнего (
bottom
) или правого (
right
) края веб-страницы или стилизуемого элемента в пикселах или em, поэтому, если вы хотите быть уверенными в том, что изображение помещено точно в правый нижний угол, используйте в качестве единиц измерения либо ключевые слова (
bottom right
),
262 Часть 2. Применение CSS
либо процентные значения, как описывается далее. Однако вы можете использовать отрицательные значения, чтобы сместить изображение относительно правого края или поднять относительно верхнего, скрывая часть. Возможно, вы захотите приме- нить значения для подрезки части изображения. Или, если у фонового изображения имеется большое пустое поле с левой или верхней стороны, можно применять от- рицательные значения для его устранения.
Процентные значенияДля позиционирования фоновых изображений вы также можете применять про- центные значения после ключевых слов или абсолютных значений, описанных выше. Так можно добиться интересного эффекта. Например, можно позициони- ровать элемент на расстояние, пропорциональное его ширине. Допустим, когда вам нужно переместить рисунок на расстояние три четверти размера элемента от заголовка, но вы не знаете ширину.
Как и в случае с пикселами или значениями в em, вы должны указать два про- центных значения: одно представляет собой горизонтальную координату, а вто- рое — вертикальную. Относительно чего рассчитывается значение, указанное в процентах? Если объяснить в двух словах, то оно приравнивается к процентному значению стилизуемого элемента.
Лучший способ понять — рассмотреть несколько практических примеров. Что- бы позиционировать изображение в центре веб-страницы (аналогично изображе- нию в центре рис. 8.8), необходимо написать:
background-position:50% 50%;
Свойство устанавливает координату
x таким образом, что она указывает на точ- ку изображения в 50 % от его левой стороны, которая находится в 50 % от левого края веб-страницы (или любого элемента, к которому применяется фоновое изо- бражение). Координата
y задается так, что она указывает на точку изображения в 50 % от верхней стороны, которая находится в 50 % от соответствующего края веб-стра- ницы или стилизуемого элемента. Другими словами, центр изображения совпадает с центром элемента, для которого оно определено в качестве фонового. Это означа- ет, что при использовании процентных значений точные координаты позициони- рования динамически изменяются и похожи на «движущуюся мишень» (поэтому координаты позиционирования стилизуемого элемента в процентах могут изме- няться, если посетители веб-страницы меняют размеры окна браузера).
ПРИМЕЧАНИЕ
Размещение изображения по вертикали в фоне страницы с помощью процентов не
обязательно поместит его в правильном месте, если содержимое страницы не заполняет всю высоту окна брау- зера.
Как и в случае с пикселами и em, можно назначать отрицательные процентные значения, но результаты трудно предугадать. Вы можете также комбинировать и подбирать значения в пикселах, em и процентах одновременно. Например, чтобы поместить изображение на расстоянии 5 пикселов от левого края элемента, но в центре элемента по высоте, применяют свойство со следующими параметрами:
background-position: 5px 50%;
Глава 8. Добавление графики на веб-страницы
263Рис. 8.8. Используя проценты, сначала определите начальную «якорную» точку (координату) в изображении
ПРИМЕЧАНИЕ
Безусловно, фоновые изображения улучшают визуальное восприятие веб-страниц, но они, как прави- ло, не отображаются при распечатке. В большинстве браузеров фоновые изображения могут распе- чатываться, но обычно это требует дополнительных действий. Если вы хотите предоставить возмож- ность посетителям сайта печатать веб-страницы с рисунками в таком виде, как они отображаются в браузере, то вместо фоновых изображений по-прежнему используйте тег
![]()
. Например, для вставки таких важных фрагментов, как логотип сайта или схема проезда к интернет-магазину.
Фиксация изображения на местеКогда посетитель прокручивает содержимое веб-страницы так, чтобы увидеть ее остальную часть, фоновое изображение прокручивается вместе с содержимым.
В результате кажется, что рисунок на заднем плане перемещается вместе с текстом.
Кроме того, если он не повторяется, то в процессе прокрутки исчезнет из виду.
Когда вы устанавливаете в качестве фонового изображения веб-страницы логотип сайта или водяной знак, вы, вероятно, хотите, чтобы он всегда оставался в пределах видимости во время просмотра.
В CSS такая проблема решается посредством свойства background-attachment
, ко- торое может принимать два значения: scroll и fixed
. Значение по умолчанию scroll определяет такое поведение браузера, при котором фоновое изображение прокручи- вается вместе с текстом и другим содержимым. Значение fixed предотвращает пере- мещение, жестко фиксируя его на заднем плане (рис. 8.9). Так, если вы хотите по- местить логотип компании в левом верхнем углу веб-страницы и зафиксировать его
264
Часть 2. Применение CSS
там даже в случае прокрутки посетителями содержимого вниз, можете создать сле- дующий стиль:
body {
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
Рис. 8.9. Для закрепления логотипа используйте свойство background-attachment с параметром fixed
Значение fixed также удобно использовать с повторяющимся мозаичным фоно- вым изображением. Когда вам требуется выполнить прокрутку, текст основного со- держимого плавно перемещается (буквально плывет) и изящно исчезает вверху веб- страницы, а фоновое изображение остается на месте, создавая красивый эффект.
Глава 8. Добавление графики на веб-страницы
265
Определение начальной позиции фонового
изображения и порядка его отсечения
В CSS3 добавлена возможность , которая позволяет сообщить браузеру, где фоно- вое изображение должно начаться по отношению к рамке, отступу и содержимому элемента. Например, когда изображение используется для повторяющегося запол- нения, оно начинается в верхнем левом углу отступа элемента (верхнее среднее изображение на рис. 8.10). Но начальную позицию изображения можно изменить, воспользовавшись свойством background-origin
. Этому свойству задается одно из трех значений:
border-box
— изображение помещается в верхний левый угол области, которая выделена для рамки (верхнее изображение слева на рис. 8.10);
padding-box
— изображение помещается в верхний левый угол области, которая отведена под отступы (верхнее изображение посередине на рис. 8.10). Это обыч- ное место, куда браузер помещает фоновое изображение;
content-box
— изображение помещается в верхний правый угол той области, которая отведена под содержимое (верхнее изображение справа на рис. 8.10).
Рис. 8.10. Применение свойств background-origin и background-clip к фоновому цвету
Разумеется, эти настройки не имеют смысла, когда вокруг элемента нет ни от- ступа, ни рамки. Кроме того, эффект может быть практически незаметен, особенно если у заполняющего повторяющегося изображения не видно стыков.
ПРИМЕЧАНИЕ
Свойства background-origin и background-clip в Internet Explorer 8 и более ранних версиях не ра- ботают. Поскольку Internet Explorer все еще пользуется популярностью, применяйте это свойство с оглядкой.
266 Часть 2. Применение CSS
Однако
данный эффект может быть весьма заметен, если изображение не повто- ряется. Например, если вы выберете настройку no-repeat и фоновое изображение появится только один раз, его можно поместить в верхний левый угол области (вну- три любых отступов):
background-image: url(logo.png);
background-repeat: no-repeat;
background-origin: content-box;
Кроме того, свойство background-origin может эффективно использоваться с дру- гим новым свойством — background-clip
. Свойство background-clip ограничивает область появления фонового изображения. Обычно фоновые изображения запол- няют всю область элемента, включая пространство за рамкой и отступами (нижнее левое изображение на рис. 8.10). Но область появления изображения можно указать с помощью трех значений.
border-box
— позволяет изображению появляться позади содержимого полно- стью за любыми границами. Это можно заметить только при наличии границ с видимыми разрывами, например при использовании пунктирной линии (ниж- нее левое изображение на рис. 8.10). Именно это и делают браузеры, поэтому применять эту настройку нет никакого смысла.
padding-box
— дает возможность ограничить любое фоновое изображение обла- стью отступов и содержимого элемента (нижнее среднее изображение на рис. 8.10).
Эта настройка пригодится при наличии границы, составленной из пунктиров или точек и нежелании видеть изображения в разрывах границы.
content-box
— позволяет ограничить фоновое изображение областью содержи- мого элемента (нижнее правое изображение на рис. 8.10).
Сочетая свойства background-origin и background-clip
, можно заставить изобра- жение начинаться в верхнем левом углу области содержимого и появляться толь- ко за содержимым:
background-origin: content-box;
background-clip: content-box;
Масштабирование фоновых изображенийВ отличие от HTML-тега
![]()
, размеры фонового изображения можно изменить.
Тег размещает фоновое изображение с тем размером, который был задан при его создании. А в CSS3 добавлено свойство background-size
, позволяющее управлять размером фонового изображения. Чтобы установить размер, можно выбирать либо значения, либо ключевые слова.
Чтобы установить размер изображения, нужно задать его высоту и ширину.
Для этого можно воспользоваться абсолютными значениями, выраженными в пикселах:
background-size: 100px 200px;
Этот код устанавливает для фонового изображения ширину 100 пикселов и вы- соту 200 пикселов. Можно также указать только значения ширины или высоты, задав для оставшегося значения режим определения auto
:
background-size: 100px auto;
Глава 8. Добавление графики на веб-страницы
267
В таком случае фоновое изображения будет иметь ширину 100 пикселов, а браузер автоматически установит его высоту, сохраняя пропорции изображения (чтобы не возникло искажений). Можно также использовать процентные значения. Если нужно масштабировать изображение для точного попадания в фон, можно для обеих настроек использовать значение 100 % (изображение слева на рис. 8.11):
background-size: 100% 100%;
Ключевое слово contain приводит к изменению размеров изображения. Оно за- ставляет его поместиться в область, сообразуясь с соотношением сторон (посере- дине изображение на рис. 8.11). В зависимости от формы изображения и элемен- та изображение растягивается, чтобы поместиться либо по ширине, либо по высоте элемента. background-size: contain;
Ключевое слово cover заставляет ширину изображения соответствовать ширине элемента, а высоту изображения соответствовать высоте элемента. Обычно это приводит к искажению изображения путем либо сжатия, либо растяжения с тем, чтобы оно поместилось в размеры элемента (изображение справа на рис. 8.11).
background-size: cover;
Использование свойства background-size практически всегда приводит к изме- нению размеров исходного изображения: если изображение меньше элементов, браузер увеличивает его масштаб, что зачастую выражается заметным дублирова- нием пикселов и ухудшением качества изображения (что видно по фоновым изо- бражениям на рис. 8.11).
Рис. 8.11. Использование свойства background-size
Свойство background-size является единственным способом изменения размеров фонового изображения. Это свойство понимает большинство браузеров, но следу- ет иметь в виду, что такой все еще широко используемый веб-браузер, как Internet
Explorer 8, его не понимает, поэтому используйте его с оглядкой (или без нее, если
Internet Explorer 8 вас не волнует).
СОВЕТ
Свойство background-size может оказаться особенно удобным при работе с элементами, размер которых определяется с применением процентных показателей, допустим при использовании вос- приимчивых конструкций, рассматриваемых в гл. 14. Например, если поместить изображение в фон
268 Часть 2. Применение CSS
баннера, занимающего 960 пикселов при просмотре на мониторе настольного компьютера, но сжать его до 480 пикселов при просмотре на телефоне, можно поместить в баннер большое изображение и воспользоваться следующей настройкой:
background-size: 100% auto;
Эта настройка заставит веб-браузер изменить размер изображения таким образом, чтобы оно по- местилось в сжатый баннер.
Сокращенный вариант свойства backgroundКак видно из примеров предыдущих разделов, чтобы воспользоваться всеми пре- имуществами фоновых изображений, необходимо применять свойства, управля- ющие параметрами фоновых изображений. Но многократный повторный набор таких длинных свойств, как background-image
, background-attachment и т. д., отнима- ет много времени. Существует более простой метод — применение сокращенного свойства background
Фактически вы можете объединить и перечислить все фоновые свойства (вклю- чая background-color
, с которым мы познакомились в предыдущей главе) в един- ственной строке лаконичного кода CSS.
Просто набирайте свойство background
, за которым должны следовать значения для background-image
, background-position
, background-repeat
, background-attachment и
background-color
. Следующий стиль устанавливает фон белого цвета с едва замет- ным неповторяющимся отпечатком, закрепленным по центру веб-страницы:
body { background: url(bullseye.gif) center center no-repeat fixed #FFF;
}
Вовсе не обязательно указывать абсолютно все параметры свойства. Вы може- те использовать один из них или любое сочетание. Например, background: yellow равнозначно background-color: yellow
. Все те параметры свойства, которые вы не определите сами, будут иметь стандартные значения по умолчанию. Допустим, вы задали только само фоновое изображение:
background: url(image/bullseye.gif)
Это эквивалентно следующему стилю:
background: url(image/bullseye.gif) scroll left top repeat transparent;
Поведение, когда при отсутствии определения
значения происходит возвраще- ние к значениям, по умолчанию может привести к весьма неожиданным результа- там. Предположим, например, что к стилю добавляются два объявления:
background-color: yellow;
background: url(image/bullseye.gif) no-repeat;
Возможно, вы ожидали увидеть изображение бычьего глаза на желтом фоне.
Но вы его не увидите, потому что при встрече свойства background без указания цвета, браузер переключает значение background-color на transparent
(невидимый).
Чтобы выйти из этой сложной ситуации нужно указать свойство background-color вторым:
Глава 8. Добавление графики на веб-страницы
269
background: url(image/bullseye.gif) no-repeat;
background-color: yellow;
Кроме того, когда к одному и тому же элементу применяется сразу несколько свойств, можно в конечном итоге случайно уничтожить фоновые изображения.
Предположим, например, что нужно добавить фоновое изображение к каждому абзацу страницы, для чего создается следующий стиль:
p {
background: url(icon.png) left top no-repeat rgb(0,30,0);
}
Затем принимается решение, что после заголовка второго уровня каждый пер- вый абзац должен иметь синий фон, и создается следующий стиль: h2 + p {
background: blue;
}
В этом втором стиле используется сокращенная запись, сбрасывающая все остальные свойства фона к их значениям по умолчанию. Что касается изображе- ния, то по умолчанию оно вообще не используется, поэтому вместо простого до- бавления к абзацу синего фона с оставлением изображения на месте, этот стиль вообще удаляет изображение!
То есть сокращенная запись свойства background может сэкономить время на написании кода, но также может и принести проблемы, о чем не нужно забывать.
ПРИМЕЧАНИЕ
В сокращенной записи свойств фона можно использовать и самые новые свойства, введенные в CSS3, — background-size, background-origin и background-clip, но стоит ли это делать? Во-первых, поскольку Internet Explorer 8 не понимает эти свойства, их добавление к объявлению фона приве- дет к тому, что Internet Explorer 8 пропустит другие, понимаемые им свойства (то есть он проиг- норирует все ваши фоновые настройки). Кроме того, свойства нужно перечислять в определенном порядке и нет такого браузера (на момент написания книги), который мог бы в одном объявлении обработать вместе значения background-position и background-size. Чтобы решить эту проблему, можно создать объявление для общепринятых свойств в форме сокращенной записи — изображе- ния, позиции, повторения, размещения и цвета, а затем после сокращенной формы объявления добавить отдельные объявления для новых свойств CSS3.
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Поиск бесплатных коллекций изображений
Вы не художник, не умеете рисовать, и у вас даже нет цифровой камеры. Где же можно найти иллюстративный ма- териал для сайта?
Нужно отдать должное Сети. Она представляет собой универсальное средство поиска, благодаря которому можно выйти из любой ситуации. Существует мно
жество платных сайтов, содержащих коллекции го
товых фотографий и иллюстраций, но наряду с ними также есть довольно много бесплатного материала.
Образцы замечательных фотографий можно най
ти на сайте Morgue File (
www.morguefile.com
).
Stock.xchng (
www.sxc.hu
) — еще один отличный фоторесурс. Сайт Open Photo (
http://openphoto.
net/gallery/browse.html
) предлагает коллекции
270
Часть 2. Применение CSS
изображений, предоставляя возможность их при
менения с некоторыми ограничениями. Вы мо
жете воспользоваться поиском по сайту Creative
Commons и найти изображения (а также видео и му
зыку), которые могут быть задействованы в лич
ных или коммерческих проектах: http://search.
creativecommons.org
. Кроме того, вы можете ис
кать картинки с лицензией Creative Commons через
Flickr (
www.flickr.com/creativecommons
) и Picasa
Web Albums (
http://picasaweb.google.com
). За фотографии на бесплатных сайтах не нужно платить, но не все они могут использоваться в коммерческих проектах. Обязательно читайте коментарии мелким шрифтом ко всем фото, с которыми собираетесь ра
ботать.
Если вы ищете образцы маркеров для списков, значки для панели управления, рисунки фоновых узоров для заполнения экрана, то в вашем распоряжении также много сайтов. Сайт под названием Some Random Dude бесплатно предлагает набор из 121 значка: www.so- merandomdude.net/srd-projects/sanscons
. Если вас интересуют мозаичные фоновые рисунки, за
йдите на один из следующих сайтов: ColourLovers.com
(
www.colourlovers.com/patterns
), Pattern4u (
www.
kol lermedia.at/pattern4u
) или Squidfingers (
http://
squidfingers.com/patterns
). Можете также создать собственный черепичный фон с помощью следующих инструментов: BgPatterns (
http://bgpatterns.com
),
Stripe Generator 2.0 (
www.stripegenerator.com
) или
PatternCooler (
www.patterncooler.com
).
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Использование нескольких фоновых изображений
Хотя вполне достаточно и одного фонового изображения, имеется возможность выкладывания слоями сразу нескольких изображений. Предположим, например, что нужно добавить фоновое изображение к боковой панели, чтобы придать ей видимость свитка (рис. 8.12). Если просто поместить в качестве фона одно изо- бражение, то сначала оно может работать (верхнее изображение слева на рис. 8.12), но если добавить к боковой панели слишком много текста, внешний вид ухудшит- ся (верхнее изображение справа на рис. 8.12). Причина в том, что у изо бражения один размер и оно не будет становиться больше или меньше, чтобы подстроиться под размер боковой панели.
К счастью, CSS3 допускает добавление к фону элемента нескольких изображе- ний. В случае со свитком можно использовать три фоновых изображения: одно для верхней части свитка, другое для нижней его части и третье для его текстовой об- ласти. Это последнее изображение представляет собой бесшовную плитку, поэто- му при увеличении высоты боковой панели изображение просто заполняет новое пустое пространство плитками.
Разумеется, несколько изображений можно применять и для решения менее сложных задач. Предположим, например, что к фону элемента нужно добавить красочное сильно текстурированное изображение, а также к нему нужно добавить двухцветный логотип. Как сказано во врезке «Информация для новичков. GIF-,
JPEG- и PNG-файлы: веб-графика» в разделе «Добавление фоновых изображений» данной главы, для многоцветного изображения больше подходит формат JPEG, а для областей, содержащих чистые цвета, к которым можно отнести логотип, боль- ше подходит формат PNG8. В данном случае можно объединить преимущества, используя JPEG для многоцветного фона и PNG8 для логотипа.
Глава 8. Добавление графики на веб-страницы
271
Рис. 8.12. Использование нескольких фоновых изображений
Для создания нескольких фоновых изображений нужно просто воспользовать- ся свойством background-image со списком изображений с запятой в качестве разде- лителя:
272 Часть 2. Применение CSS
background-image: url(scrollTop.jpg),
url(scrollBottom.jpg),
url(scrollMiddle.jpg);
ПРИМЕЧАНИЕ
В данном примере кода каждый URL-адрес
находится на отдельной строке, но это не является обязательным требованием. Все это можно набрать и одной (но очень длинной) строкой. Однако многие разработчики считают, что код будет легче читаться, если ссылку на каждое изображение поместить в отдельной строке и воспользоваться пробелами (или табуляцией) для отступа строк, расположив ссылки друг под другом. Нужно лишь помнить о необходимости поставить запятую после каждой ссылки, за исключением последней, для которой обычно требуется точка с запятой, завершающая объявление.
Поскольку фоновые изображения обычно выстраиваются в плитку, зачастую необходимо также включать и объявление свойства background-repeat
(если это- го не сделать, изображения начнут выстраиваться в плитку одно над другим, закрывая собой все нижние изображения). Можно добавить еще и другие свой- ства фона, состоящие из простого набора значений, для которого в качестве раз- делителя используется запятая:
background-repeat: no-repeat,
no-repeat,
repeat-y;
При использовании нескольких значений, подобных этим, первое значение (в дан- ном примере no-repeat
) применяется для первого изображения, указанного в свойстве background-image
(
scrollTop.png
); второе используется со вторым изображением и т. д.
Поскольку во всем этом можно быстро запутаться, многие веб-разработчики задей- ствуют для указания нескольких изображений сокращенный метод записи:
background: url(scrollTop.jpg) center top no-repeat,
url(scrollBottom.jpg) center bottom no-repeat,
url(scrollMiddle.jpg) center top repeat-y;
ПРИМЕЧАНИЕ
Несколько фоновых изображений выкладываются друг на друга, как слои в программе редактиро- вания изображений. Какое из изображений появится в верхнем слое, определяется порядком пе- речисления фоновых изображений. Изображение, указанное первым, появляется в верхнем слое элемента, второе — во втором слое, и последнее появляется в нижнем слое. В предыдущем приме- ре кода верхняя часть свитка (scrollTop.jpg) находится выше его нижней части (scrollBottom.jpg), которая, в свою очередь, располагается выше текстовой области свитка (scrollMiddle.jpg).
Учтите, что такой прием создания нескольких фоновых изображений в Internet
Explorer 8 не работает. Чтобы узнать о способе использования нескольких фоновых изображений в Internet Explorer 8, изучите следующую врезку
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙИмитация нескольких фоновых изображенийБраузер Internet Explorer 8 используется все еще доволь
но широко (изза широкого применения Windows XP).
Но поскольку Internet Explorer 8 не поддерживает не
сколько фоновых изображений, может сложиться
Глава 8. Добавление графики на веб-страницы
273впечатление, что их применения нужно избегать.
Но есть все же пара способов имитации нескольких фоновых изображений. Самый простой из них за
ключается в добавлении отдельных фоновых изобра
жений к перекрывающимся элементам. Например, можно получить такой же эффект свитка, который показан на рис. 8.12, добавляя среднюю, текстовую область свитка к фону тега
, с помощью кото
рого создается эта область боковой панели. Затем добавляется верхняя часть свитка к фону первого элемента боковой панели, в данном случае это тег
Скачать 20.28 Mb.