Задання кольору через rgba у CSS

Вивчаємо функцію rgba() у CSS та використовуємо альфа-канал для створення прозорих і напівпрозорих кольорів.

Функція rgba()

Функція rgba() працює подібно до rgb(), але дозволяє додатково задавати прозорість кольору. Назва rgba складається з red, green, blue та alpha — червоного, зеленого, синього та альфа-каналу.

rgba(red, green, blue, alpha)

Перші три значення визначають колір: red, green та blue. Четверте значення alpha визначає прозорість і може бути від 0 до 1.

0 — повністю прозорий колір.
0.5 — напівпрозорий колір.
1 — повністю непрозорий колір.
Чим менше значення alpha, тим прозорішим буде колір.

Непрозорий колір

p {

color: rgba(255, 0, 0, 1);
}

Напівпрозорий текст

p {

color: rgba(255, 0, 0, 0.5);
}

Прозора межа

div {

border: 5px solid rgba(255, 0, 0, 0.5);
}

Напівпрозорий фон

div {

background-color: rgba(0, 0, 0, 0.4);
}

Різні значення alpha

/* Повністю прозорий */

color: rgba(255, 0, 0, 0);

/* Напівпрозорий */
color: rgba(255, 0, 0, 0.5);

/* Майже непрозорий */
color: rgba(255, 0, 0, 0.8);

/* Повністю непрозорий */
color: rgba(255, 0, 0, 1);

❗ Важливо:

Alpha впливає саме на прозорість кольору. Значення 0 робить його повністю прозорим, а 1 — повністю непрозорим.

Практичне завдання

📌 Завдання:

№1. Задайте абзацам червоний напівпрозорий колір.
№2. Задайте фону зелений напівпрозорий колір.
№3. Задайте межі блакитний напівпрозорий колір.

<!-- Початковий код -->

<p>Текст абзацу</p>

<div> Блок </div>

💡 Показати підказку

Для червоного використайте rgba(255, 0, 0, 0.5), для зеленого — rgba(0, 255, 0, 0.5), для блакитного — rgba(0, 255, 255, 0.5).

✅ Показати відповідь

/* №1 */

p {
color: rgba(255, 0, 0, 0.5);
}

/* №2 */
div {
background-color: rgba(0, 255, 0, 0.5);
}

/* №3 */
div {
border: 5px solid rgba(0, 255, 255, 0.5);
}