Несколько фонов [13/16]
Несколько фонов одному элементу можно задать с помощью множественных фонов. Это достаточно новая возможность CSS3, и мы рассмотрим её в продвинутых курсах.
А сейчас рассмотрим старую надёжную технику создания нескольких фонов.
Суть техники заключается в том, что мы вкладываем элементы друг в друга и делаем их одинакового размера, а затем каждому элементу задаём свой фон. Т.е. каждый элемент служит одним слоем фона.
Фоны вложенных элементов перекрывают друг друга: чем глубже элемент, тем выше его фон.
Кстати, для удобства ширину лучше задавать внешнему элементу (т.к. все вложенные будут той же ширины), а высоту самому глубокому, т.к. он растянет по высоте всех своих родителей.
Файл css52.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Несколько фонов</title>
<style>
body {
padding-top: 80px;
}
.block1 {
width: 256px;
margin: 0 auto;
box-shadow: 1px 1px 3px #999999;
background-image: url("https://htmlacademy.ru/assets/course13/cows.jpg");
background-repeat: no-repeat;
}
.block2 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");
background-position: 190px 195px;
background-repeat: no-repeat;
}
.block3 {
background-image: url("https://htmlacademy.ru/assets/course13/fence.png");
height: 256px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="block1">
<div class="block2">
<div class="block3"></div>
</div>
</div>
</body>
</html>
Курс «Фоны, часть 1»
Эффекты с повторяющимся фоном [14/16]
Повторяющийся фон, тот у которого repeat, repeat-x или repeat-y, часто используется для создания интересных декоративных эффектов.
Например:
стежки;
зазубренные края;
градиенты и тени.
Да, сейчас уже градиенты и тени можно делать с помощью CSS. Но иногда, когда тень или градиент достаточно сложные, проще использовать полупрозрачный PNG.
Самое главное при создании таких эффектов — выбрать картинку с нужным периодом. Она может быть очень маленькой и даст существенную экономию веса страницы.
Попрактикуемся. Только, пожалуйста, изменяйте режим повторения после того, как пропишете фоновые изображения. Так будет нагляднее.
Файл css53.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Эффекты с повторяющимся фоном</title>
<style>
body {
padding-top: 40px;
}
.block {
height: 70px;
margin: 30px 50px;
background-color: #3498db;
background-repeat: repeat-x;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-image: url("https://htmlacademy.ru/assets/course13/stitch.png");
background-repeat: repeat-x;
background-position:30px 30px;
}
.block2 {
background-image: url("https://htmlacademy.ru/assets/course13/zigzag.png");
background-repeat: repeat-x;
background-position: 0 0;
}
.block3 {
background-image: url("https://htmlacademy.ru/assets/course13/shadow.png");
background-repeat: repeat-x;
background-position: 0 100%;
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
</body>
</html>