Комбинирование нескольких фоновых свойств
На этом шаге вы научитесь комбинировать несколько фоновых свойств для создания более сложных и интересных фоновых дизайнов. Мы модифицируем файл 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.jpg"), 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>
Файл small-pattern.jpg находится в каталоге ~/project.
Этот пример демонстрирует две продвинутые техники работы с фоном:
-
Несколько фонов с наложением:
- Использует линейный градиент для создания полупрозрачного наложения.
- Комбинирует градиент с фоновым изображением.
- Применяет одинаковые размеры, позиционирование и повторение.
-
Многослойные фоны:
- Комбинирует повторяющийся узор с линейным градиентом.
- Использует разные размеры и позиционирование для каждого фонового слоя.
При открытии этого HTML-файла в браузере вы увидите, как несколько фоновых свойств могут создавать сложные и визуально интересные дизайны.
