Объединение нескольких свойств фона
В этом шаге вы научитесь объединять несколько свойств фона, чтобы создавать более сложные и интересные дизайны фона. Мы изменим файл styles.html в каталоге ~/project, чтобы продемонстрировать продвинутые методы стилизации фона.
Обновите файл styles.html следующим содержанием:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Несколько свойств фона</title>
<style>
.image-container {
width: 600px;
height: 400px;
border: 2px solid black;
margin: 20px;
color: white;
font-weight: bold;
padding: 20px;
}
.multiple-backgrounds {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("background-sample.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.layered-backgrounds {
background-image:
url("small-pattern.png"), linear-gradient(to right, #ff6b6b, #4ecdc4);
background-size:
100px 100px,
cover;
background-position:
top left,
center;
background-repeat: repeat, no-repeat;
}
</style>
</head>
<body>
<div class="image-container multiple-backgrounds">
Фон с наложением изображения
</div>
<div class="image-container layered-backgrounds">
Слоистый фон с узором и градиентом
</div>
</body>
</html>
Сначала загрузите изображение с маленьким узором:
wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png
В этом примере демонстрируются два продвинутых метода оформления фона:
-
Несколько фонов с наложением:
- Использует линейный градиент для создания полупрозрачного наложения
- Объединяет градиент с фоновым изображением
- Применяет одинаковые размеры, позиционирование и повторение
-
Слоистые фоны:
- Объединяет повторяющийся узорный рисунок с линейным градиентом
- Использует разные размеры и позиционирование для каждого слоя фона
При открытии этого HTML-файла в браузере вы увидите, как несколько свойств фона могут создавать сложные и визуально интересные дизайны.
