Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 8255 / 876 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 31:

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

< Лекция 30 || Лекция 31: 123 || Лекция 32 >
Аннотация: В этой лекции рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью CSS, настройка их размещения, укладка их вертикально или горизонтально, и объединение фоновых изображений с помощью спрайтов 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, или селектора
      • Добавление цвета фона
      • Применение фонового изображения
      • Управление повторением фона
      • Присоединение
      • Позиционирование изображения
      • Использование сокращения для общего объединения
    • Эксперименты с кодом
    • Тестирование качества
  • Спрайты
    • Пример сложного спрайта и фонового изображения
      • Создание спрайта
  • Заключение
    • Сведения об авторах изображений
  • Контрольные вопросы
  • Дополнительное чтение

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

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 и объединения в группы связанных свойств. Можно написать общее правило использования сокращения, и затем переопределить его необходимым образом с конкретными свойствами.

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

  1. color
  2. url
  3. repeat
  4. attachment (очень редко используется; может опускаться)
  5. horizontal-position
  6. vertical-position

Примером такого сокращения со всеми использованными свойствами (за исключением attachment ) будет следующий:

background: green url(logo.gif) no-repeat left top;
< Лекция 30 || Лекция 31: 123 || Лекция 32 >
Марина Походаева
Марина Походаева

Помогите мне. Я ничего не понимаю в курсе ((((((   (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!!

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?


( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6551105208160watchdog( )../bootstrap.inc:0
24.6554105210656module_invoke( )../bootstrap.inc:967
34.6554105212512call_user_func_array ( )../module.inc:462
44.6554105212848devel_watchdog( )../module.inc:462
54.6555105213696decode_entities( )../devel.module:382
64.6555105215616drupal_error_handler( )../devel.module:340
74.6555105219240watchdog( )../common.inc:663
84.6556105221336module_invoke( )../bootstrap.inc:967
94.6556105223192call_user_func_array ( )../module.inc:462
104.6556105223528devel_watchdog( )../module.inc:462
114.6556105224224decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6551105208160watchdog( )../bootstrap.inc:0
24.6554105210656module_invoke( )../bootstrap.inc:967
34.6554105212512call_user_func_array ( )../module.inc:462
44.6554105212848devel_watchdog( )../module.inc:462
54.6555105213696decode_entities( )../devel.module:382
64.6555105215616drupal_error_handler( )../devel.module:340
74.6555105219240watchdog( )../common.inc:663
84.6556105221336module_invoke( )../bootstrap.inc:967
94.6556105223192call_user_func_array ( )../module.inc:462
104.6556105223528devel_watchdog( )../module.inc:462
114.6556105224224decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6551105208160watchdog( )../bootstrap.inc:0
24.6554105210656module_invoke( )../bootstrap.inc:967
34.6554105212512call_user_func_array ( )../module.inc:462
44.6554105212848devel_watchdog( )../module.inc:462
54.6555105213696decode_entities( )../devel.module:382
64.6562105215808drupal_error_handler( )../devel.module:340
74.6562105219496watchdog( )../common.inc:663
84.6562105221592module_invoke( )../bootstrap.inc:967
94.6562105223448call_user_func_array ( )../module.inc:462
104.6562105223784devel_watchdog( )../module.inc:462
114.6563105224560decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6551105208160watchdog( )../bootstrap.inc:0
24.6554105210656module_invoke( )../bootstrap.inc:967
34.6554105212512call_user_func_array ( )../module.inc:462
44.6554105212848devel_watchdog( )../module.inc:462
54.6555105213696decode_entities( )../devel.module:382
64.6562105215808drupal_error_handler( )../devel.module:340
74.6562105219496watchdog( )../common.inc:663
84.6562105221592module_invoke( )../bootstrap.inc:967
94.6562105223448call_user_func_array ( )../module.inc:462
104.6562105223784devel_watchdog( )../module.inc:462
114.6563105224560decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6569105208704watchdog( )../bootstrap.inc:0
24.6569105210800module_invoke( )../bootstrap.inc:967
34.6569105212656call_user_func_array ( )../module.inc:462
44.6569105212992devel_watchdog( )../module.inc:462
54.6570105213696decode_entities( )../devel.module:382
64.6570105215616drupal_error_handler( )../devel.module:340
74.6570105219240watchdog( )../common.inc:663
84.6570105221336module_invoke( )../bootstrap.inc:967
94.6570105223192call_user_func_array ( )../module.inc:462
104.6570105223528devel_watchdog( )../module.inc:462
114.6571105224224decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6569105208704watchdog( )../bootstrap.inc:0
24.6569105210800module_invoke( )../bootstrap.inc:967
34.6569105212656call_user_func_array ( )../module.inc:462
44.6569105212992devel_watchdog( )../module.inc:462
54.6570105213696decode_entities( )../devel.module:382
64.6570105215616drupal_error_handler( )../devel.module:340
74.6570105219240watchdog( )../common.inc:663
84.6570105221336module_invoke( )../bootstrap.inc:967
94.6570105223192call_user_func_array ( )../module.inc:462
104.6570105223528devel_watchdog( )../module.inc:462
114.6571105224224decode_entities( )../devel.module:382

( ! ) Warning: include_once(./includes/unicode.entities.inc) [<a href='function.include-once'>function.include-once</a>]: failed to open stream: No such file or directory in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6569105208704watchdog( )../bootstrap.inc:0
24.6569105210800module_invoke( )../bootstrap.inc:967
34.6569105212656call_user_func_array ( )../module.inc:462
44.6569105212992devel_watchdog( )../module.inc:462
54.6570105213696decode_entities( )../devel.module:382
64.6575105215808drupal_error_handler( )../devel.module:340
74.6575105219496watchdog( )../common.inc:663
84.6575105221592module_invoke( )../bootstrap.inc:967
94.6575105223448call_user_func_array ( )../module.inc:462
104.6575105223784devel_watchdog( )../module.inc:462
114.6576105224560decode_entities( )../devel.module:382

( ! ) Warning: include_once() [<a href='function.include'>function.include</a>]: Failed opening './includes/unicode.entities.inc' for inclusion (include_path='.:/usr/local/zend/var/libraries/Zend_Framework_1/default/library:/usr/local/zend/share/pear') in /.2/var_www_new.intuit.ru/htdocs/includes/unicode.inc on line 340
Call Stack
#TimeMemoryFunctionLocation
14.6569105208704watchdog( )../bootstrap.inc:0
24.6569105210800module_invoke( )../bootstrap.inc:967
34.6569105212656call_user_func_array ( )../module.inc:462
44.6569105212992devel_watchdog( )../module.inc:462
54.6570105213696decode_entities( )../devel.module:382
64.6575105215808drupal_error_handler( )../devel.module:340
74.6575105219496watchdog( )../common.inc:663
84.6575105221592module_invoke( )../bootstrap.inc:967
94.6575105223448call_user_func_array ( )../module.inc:462
104.6575105223784devel_watchdog( )../module.inc:462
114.6576105224560decode_entities( )../devel.module:382