Свойство background-image
CSS-свойство background-image используется для вставки фонового изображения. Ниже мы используем в качестве фонового изображение бабочки, вы можете использовать другое изображение. Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка. Файл рисунка должен находиться в той же папке, что и файл вызывающей страницы. Задание 8.6 Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default6.htm в браузере default6.htm: <html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style6.css" /> …. остальное без изменений style6.css: body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; } Свойство background-repeat Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим. В таблице указаны четыре значения background-repeat.
Например, для отмены повторения/мультипликации фонового рисунка следует записать такой код: Задание 8.7 Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default7.htm в браузере default7.htm: <html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style7.css" /> …. остальное без изменений style7.css: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Задание для самостоятельного выполнения: измените последовательно значения параметра background-repeat и посмотрите результат. Свойство background-attachment Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы. В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.
Например, следующий код фиксирует изображение. Задание 8.8 Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите defaul8.htm в браузере default8.htm: <html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style8.css" /> </head> <body> <h1>Моя первая таблица стилей</h1> <p>……... сюда следует вставить произвольную страницу текста, с целью обеспечения появления полосы прокрутки, иначе эффект будет не виден!!!!!.... </p> </body></html> style8.css: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
Задание для самостоятельного выполнения: измените последовательно значения параметра background-attachment и посмотрите результат.
Свойство background-position По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана. Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера. Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. В таблице дано несколько примеров.
В примере кода фоновое изображение располагается в правом нижнем углу экрана: Задание 8.9 Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default9.htm в браузере default9.htm: <html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style9.css" /> …. остальное без изменений
style9.css: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; } Задание для самостоятельного выполнения: измените последовательно значения параметра background-repeat и посмотрите результат. Свойство background входит в состав всех свойств, перечисленных в этом уроке. С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц. Например, посмотрите на эти строки:
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
Используя background, того же результата можно достичь одной строкой кода: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Порядок свойств этого элемента таков: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:
background: #FFCC66 url("butterfly.gif") no-repeat;
то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left. Контрольные вопросы: 1. Назовите способы привязки CSS к HTML-документу. 2. Перечислите свойства для задания цвета и фона.
Лабораторная работа №9 Цель работы:получить навыки работы с шрифтами. Задачи: · научиться использовать основные свойства CSS для задания шрифтов; · научиться использовать ссылки в CSS.
Популярное: Модели организации как закрытой, открытой, частично открытой системы: Закрытая система имеет жесткие фиксированные границы, ее действия относительно независимы... Организация как механизм и форма жизни коллектива: Организация не сможет достичь поставленных целей без соответствующей внутренней... Как построить свою речь (словесное оформление):
При подготовке публичного выступления перед оратором возникает вопрос, как лучше словесно оформить свою... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (608)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |