CSS властивості
ГлавнаяБлогЯк зробити фон напівпрозорим?

Як зробити фон напівпрозорим?

160

Для створення кольорового фону різного ступеня прозорості застосовується властивість 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. Напівпрозорий блок