CSS rgba() — колір із прозорістю

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

правити

Загальний опис

Головна відмінність від opacity: rgba() робить прозорим лише цей колір, а не весь елемент разом із текстом і дітьми. Напівпрозоре тло з чітким текстом можливе тільки так.

У сучасному CSS rgba() злився з rgb(): тепер можна писати rgb(0 0 0 / 50%) через косу риску. Старий запис лишається робочим — його підтримують геть усі браузери.

правити

Порада

Для напівпрозорого тла бери rgba(), а не opacity — інакше разом із тлом побліднішає й текст.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

rgba(red, green, blue, alpha)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
rgba	1+	3+	3.1+	10+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
rgba	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<div class="overlay">Текст лишається чітким</div>

.overlay {
    /* прозоре лише тло, не текст */
    background: rgba(1, 114, 173, 0.15);
    color: #14170f;
    padding: 1rem;
}

/* сучасний еквівалент */
.modern {
    background: rgb(1 114 173 / 15%);
}