Как сделать текст полупрозрачным?

В CSS для определения полупрозрачного цвета есть специальный формат RGBA. Этот формат задаёт цвет в виде значений трёх компонент — красной, зелёной и синей, каждая из компонент меняется от 0 до 255. Четвёртым параметром идёт степень прозрачности этого цвета, задаётся от 0 до 1. Цвет в итоге может быть полностью прозрачным, полупрозрачным или полностью непрозрачным.

С помощью функции 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>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 14.04.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты