Практическая работа №1
Фоновое изображение
Задание 1
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
Задание 2
Создайте в Corol Draw фон, с градиентной заливкой, сохраните как изображение
'gradient2.png'. Вставьте как фоновое
изображение.
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
Задание 3
Вставить фоновое изображение сначала справа, а затем слева, изменив изображение и отступ.
<style type="text/css">
body
{
background-image:url('girl.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:450px;
}
</style>
Задание 4
Зафиксировать
фоновое изображение с помощью свойств
background-repeat:no-repeat;
background-attachment:fixed;
А потом изменить, чтобы изображение не прокручивалось.
Задание 5
Создайте документ, где будет применено повторение изображения для абзаца.
<p style="background-image:url(64.gif);
height:100px;
border:#FF0000
solid
1px;">
Изображение
является фоновым изображением данного абзаца </p>
Рабочие листы
к вашим урокам
Скачать
Свойство CSS background используется для форматирования фона элементов html.
Вы можете изменять следующие свойства CSS:
· background-color
· background-image
· background-repeat
· background-attachment
· background-position
Цвет фона
Свойство background-color определяет цвет фона элемента.
Фон страницы указывается в селекторе body:
Пример
body {background-color:#b0c4de;}
Цвет фона может быть указан с помощью:
· названия цвета, например, "red" (красный)
· значения RGB, например, "rgb(255,0,0)"
· шестнадцатиричного кода цвета, например, "#ff0000"
В примере ниже элементы h1, p и div имеют разные цвета фона:
Пример
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Фон-изображение
Свойство background-image используется для определения изображения, которое будет использоваться в качестве фона.
По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.
Фоновое изображение для всей страницы можно задать так:
Пример
body {background-image:url('paper.gif');}
Повторение фонового изображения
По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.
Для того, чтобы повторять фоновое изображение только по горизонтали, надо использовать следующую запись:
Пример
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Для того, чтобы повторять изображение по вертикали, надо заменить значение repeat-x на repeat-y.
Позиционирование фонового изображения и отмена повторения
Совет: если вы используете фоновое изображение, старайтесь подбирать его так, чтобы оно гармонировало с цветом текста.
Для того, чтобы фоновое изображение отображалось только один раз, значение свойства background-repeat должно иметь следующее значение:
Пример
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Для изменения положения фонового изображения на странице используется свойство background-position:
Пример
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Краткая запись свойств фона
Для сокращения кода css вы можете записать все свойства фона одной записью. Все значения фона, записываются в одном свойстве, называемом "background":
Пример
body {background:#ffffff url('img_tree.png') no-repeat right top;}
При краткой записи соблюдайте порядок указания свойств:
· background-color
· background-image
· background-repeat
· background-attachment
· background-position
Если вы не укажете какое-либо из свойств, будет подставлено значение по умолчанию.
6 665 158 материалов в базе
Настоящий материал опубликован пользователем Пучкина Татьяна Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
500/1000 ч.
Мини-курс
6 ч.
Мини-курс
6 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.