У CSS для визначення напівпрозорого кольору є спеціальний формат RGBA. Цей формат задає колір у вигляді значень трьох компонентів — червоної, зеленої та синьої, кожна з компонентів змінюється від 0 до 255. непрозорим.
За допомогою функції rgba() ми можемо не просто визначити колір тексту, а й одночасно ступінь його прозорості. Сама функція rgba() як значення застосовується до властивості color.
Нижче представлені варіанти визначення кольору тексту.
color: rgba(0,0,0,0) /* Повністю прозорий текст */ color: rgba(0,0,0, 1) /* Чорний текст */ color: rgba(0,0,0,0.5) /* Напівпрозорий чорний текст */ color: rgba(255,255,255,0.5) /* Напівпрозорий білий текст */ color: rgba(237,28, 36,0.8) /* Напівпрозорий червоний текст */
У прикладі 1 показано створення двох блоків — для порівняння у першому блоці колір заданий білим через шістнадцяткове значення, у другому блоці колір заданий через функцію rgba().
Приклад 1. Використання rgba()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Напівпрозорий текст</title> <style> div { background: #8dc63f; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
margin-bottom: 1rem; /* Відстань знизу */
color: #fff; /* Білий колір */
}
.semi { color: rgba(255,255,255,0.8); /* Напівпрозорий колір */
}
</style>
</head>
<body> <div>Інформаційне повідомлення</div> <div class="semi">Інформаційне повідомлення</div>
</body>
</html>