Для створення кольорового фону різного ступеня прозорості застосовується властивість background або background-color, як значення вказується функція rgba(), в якій колір задається чотирма параметрами: червона, зелена, синя складова кольору та рівень прозорості. Значення 0 відповідає повній прозорості, 1 — непрозорості, а проміжне значення на кшталт 0.5 — напівпрозорості.
Щоб напівпрозорість елемента була помітна, під нього слід підкласти фонову картинку. У прикладі 1 для веб-сторінки встановлено фіксоване фонове зображення та додано <div> з класом overlay, для якого заданий білий фон з рівнем прозорості 0.8.
Приклад 1. Використання rgba()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Фон</title> <style> body { /* Параметри фонового зображення */ background: url(/example/image/shark.jpg) center /cover no-repeat fixed; } .overlay { background: rgba(255, 255, 255, 0.8); /* Напівпрозоре тло */ padding: 1rem; /* Поля навколо тексту */ border-radius: 5px; /* Радіус заокруглення */ } </style> </head> <body> <div class="overlay"> Полінезійці називають Чумацький шлях Манго-Роа-І-Ата, що в перекладі з маорі означає «Довга акула на світанку». </div> </body> </html>
Результат цього прикладу показаний на рис. 1.
Мал. 1. Напівпрозорий блок