1. Властивості фону
CSS надає багато властивостей для керування фоном елементів.
Основні властивості:
.element {
background-color: #ffffff; /* Колір фону */
background-image: url(); /* Зображення фону */
background-position: center; /* Позиція фону */
background-size: cover; /* Розмір фону */
background-repeat: no-repeat; /* Повторення фону */
background-attachment: fixed; /* Фіксація фону */
}
background-color: #ffffff; /* Колір фону */
background-image: url(); /* Зображення фону */
background-position: center; /* Позиція фону */
background-size: cover; /* Розмір фону */
background-repeat: no-repeat; /* Повторення фону */
background-attachment: fixed; /* Фіксація фону */
}
Скорочена властивість:
.element {
background: color image position/size repeat attachment;
}
background: color image position/size repeat attachment;
}
2. Кольори фону
Кольори фону можна задавати різними способами.
.box {
background-color: red; /* Назва кольору */
background-color: #ff0000; /* HEX */
background-color: rgb(255, 0, 0); /* RGB */
background-color: rgba(255, 0, 0, 0.5); /* RGB з прозорістю */
background-color: hsl(0, 100%, 50%); /* HSL */
background-color: hsla(0, 100%, 50%, 0.5); /* HSL з прозорістю */
}
background-color: red; /* Назва кольору */
background-color: #ff0000; /* HEX */
background-color: rgb(255, 0, 0); /* RGB */
background-color: rgba(255, 0, 0, 0.5); /* RGB з прозорістю */
background-color: hsl(0, 100%, 50%); /* HSL */
background-color: hsla(0, 100%, 50%, 0.5); /* HSL з прозорістю */
}
Приклади:
HEX: #ff6b6b
RGBA: rgba(77, 171, 245, 0.7)
HSL: hsl(140, 60%, 60%)
3. Зображення фону
Для додавання зображень як фону використовується властивість background-image.
.hero-section {
background-image: url('images/hero-bg.jpg');
background-size: cover;
background-position: center;
}
background-image: url('images/hero-bg.jpg');
background-size: cover;
background-position: center;
}
Приклад з градієнтом як зображення:
background-image: linear-gradient(45deg, #667eea, #764ba2)
4. Позиціонування фону
Властивість background-position дозволяє контролювати розташування фону.
.element {
background-position: left top; /* Лівий верхній кут */
background-position: center center; /* Центр */
background-position: right bottom; /* Правий нижній кут */
background-position: 20px 50px; /* Абсолютні значення */
background-position: 50% 25%; /* Відсоткові значення */
}
background-position: left top; /* Лівий верхній кут */
background-position: center center; /* Центр */
background-position: right bottom; /* Правий нижній кут */
background-position: 20px 50px; /* Абсолютні значення */
background-position: 50% 25%; /* Відсоткові значення */
}
Розміри фону:
.container {
background-size: auto; /* Оригінальний розмір */
background-size: cover; /* Заповнити контейнер */
background-size: contain; /* Вмістити повністю */
background-size: 100% 100%; /* Розтягнути */
background-size: 200px 150px; /* Фіксовані розміри */
}
background-size: auto; /* Оригінальний розмір */
background-size: cover; /* Заповнити контейнер */
background-size: contain; /* Вмістити повністю */
background-size: 100% 100%; /* Розтягнути */
background-size: 200px 150px; /* Фіксовані розміри */
}
7. Градієнти
Градієнти дозволяють створювати плавні переходи між кольорами.
Лінійні градієнти:
.gradient-1 {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
.gradient-2 {
background: linear-gradient(to right, red, orange, yellow, green, blue);
}
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
.gradient-2 {
background: linear-gradient(to right, red, orange, yellow, green, blue);
}
Приклади градієнтів:
linear-gradient(45deg, #ff6b6b, #4ecdc4)
linear-gradient(to right, #667eea, #764ba2)
Радіальні градієнти:
.radial {
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}
radial-gradient(circle, #ff6b6b, #4ecdc4)
Практичні завдання для учнів
Спробуйте виконати ці завдання, щоб закріпити знання про CSS фони.
Завдання 1: Простий колір фону
Створіть блок з синім фоном та білим текстом. Використайте властивість background-color.
Блок з синім фоном
Підказка: використайте background-color: #3498db; color: white;
Завдання 2: Градієнтний фон
Створіть блок з вертикальним градієнтом від червоного до жовтого кольору.
Вертикальний градієнт
Підказка: background: linear-gradient(to bottom, #e74c3c, #f1c40f);
Завдання 3: Фон з позиціонуванням
Створіть блок з градієнтним фоном, який починається з правого верхнього кута.
Градієнт з правого верхнього кута
Підказка: background: linear-gradient(to bottom left, #9b59b6, #1abc9c);
Завдання 4: Напівпрозорий фон
Створіть блок з напівпрозорим чорним фоном поверх зображення або кольору.
Підказка: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(...);
Завдання 5: Радіальний градієнт
Створіть блок з радіальним градієнтом, що починається з центру.
Радіальний градієнт
Підказка: background: radial-gradient(circle, #e74c3c, #34495e);
Завдання 6: Множинні фони
Створіть блок з двома фонами: градієнтом і "шумовою" текстурою.
Множинні фони
Підказка: використайте кілька фонів через кому в background