1.1 Властивість background-color
Властивість background-color задає колір фону для елемента. Воно дозволяє встановити колірну заливку фону, забезпечуючи візуальне розділення вмісту і покращуючи сприйняття тексту та інших елементів.
Значення:
- Назви кольорів: можна використовувати заздалегідь визначені назви кольорів, такі як
red,blue,green - Шістнадцяткові значення: наприклад,
#ff0000,#00ff00,#0000ff - RGB: наприклад,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: наприклад,
rgba(255, 0, 0, 0.5)(напівпрозорий червоний) - HSL: наприклад,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: наприклад,
hsla(0, 100%, 50%, 0.5)(напівпрозорий червоний).
Приклад використання:
CSS
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
<div class="color-red">Цей елемент має червоний фон.</div>
<div class="color-hex">Цей елемент має фон із кольором, заданим у шістнадцятковому форматі.</div>
<div class="color-rgba">Цей елемент має напівпрозорий зелений фон.</div>
</body>
Пояснення коду:
background-color: red;: встановлює червоний фон для елементаbackground-color: #3498db;: встановлює колір фону за допомогою шістнадцяткового значенняbackground-color: rgba(46, 204, 113, 0.7);: встановлює напівпрозорий зелений фон із використанням RGBA
1.2 Властивість background-image
Властивість background-image задає фон зображення для елемента. Воно дозволяє використовувати зображення для створення візуально привабливих фонів, покращуючи дизайн і сприйняття веб-сторінки.
Як значення в нього потрібно передати URL зображення — вказати шлях до зображення, яке буде використовуватися як фон. Наприклад, url('image.jpg').
Приклад використання:
.background-url {
background-image: url('https://cdn.javarush.com/images/article/f6bda08b-3919-465c-9beb-f940a570cc72/1024.jpeg');
background-repeat: no-repeat;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
CSS
.background-url {
background-image: url('./img/background.jpg');
background-repeat: no-repeat;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
HTML
<body>
<div class="background-url">Цей елемент має фонове зображення</div>
</body>
Пояснення коду:
background-image: url('./img/background.jpg');: встановлює зображення як фон для елемента. У цьому випадку використовується URL зображення
Переваги використання background-image:
- Візуальна привабливість: використання фонів із зображеннями дозволяє створювати більш візуально цікаві веб-сторінки.
- Контекст: фонові зображення можуть надавати додатковий контекст чи інформацію, підсилюючи сприйняття вмісту сторінки.
- Брендування: фонові зображення можуть бути частиною брендування, допомагаючи підтримувати єдиний стиль та впізнаваність сайту.
Поради щодо використання фонів із зображеннями:
- Оптимізація зображень: для покращення продуктивності сторінки важливо оптимізувати зображення, зменшуючи їх розмір без значної втрати якості
- Кросбраузерна підтримка: переконайтеся, що зображення коректно відображаються у всіх цільових браузерах
- Альтернативний текст: для зображень, що мають важливе значення, слід передбачити альтернативні способи передачі інформації, такі як текстові описи, для користувачів із обмеженими можливостями
1.3 Спільне використання background-color та background-image
Властивості background-color і background-image можуть використовуватися разом для створення складних і привабливих фонів. Наприклад, можна встановити колір фону, який буде видно у випадку, якщо фонове зображення не завантажиться, або використовувати кольоровий фон у поєднанні з напівпрозорим зображенням.
Приклад використання:
.combined-background {
background-color: lightblue;
background-image: url('https://cdn.javarush.com/images/article/f6bda08b-3919-465c-9beb-f940a570cc72/1024.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: 610px 290px;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
CSS
.combined-background {
background-color: lightblue;
background-image: url('./img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 610px 290px;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
HTML
<body>
<div class="combined-background">
Цей елемент має комбінований фон із зображенням і кольоровим фоном
</div>
</body>
Пояснення коду:
background-color: lightblue;: встановлює колір фонуbackground-image: url('.img/background.jpg');: встановлює фонове зображенняbackground-size: 610px 290px;: встановлює розміри для фонового зображенняbackground-position: center;: центрує фонове зображення всередині елементаborder: 1px solid #000;: додає рамку навколо елемента для візуального виділенняwidth: 640px;height: 320px;: встановлює розміри елементаcolor: white;: встановлює колір текстуdisplay: flex;align-items: center;justify-content: center;: центрує текст всередині елемента
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ