Прозрачность CSS с помощью rgba и opacity

Прозрачность блока или фона CSS с помощью rgba и opacity

Свойство opacity делает прозрачным блок и все его содержимое включая текст и графику. Значение прозрачности указывается от нуля до единицы. Цифра 0 означает отсалютую прозрачность и блок полностью исчезнет, а значение 1 это максимальная не прозрачность.

К примеру opacity: 0,5; означает прозрачность 50%, а opacity: 0,1; означает прозрачность 90%, то-есть блок практически незаметный. Прозрачность opacity: 0,9; означает что блок прозрачный на 10%, то-есть слегка прозрачный.

Но opacity делает все содержимое конкретного блока прозрачным, включая текст, картинки и другую графику. При этом все блоки входящие в блок со свойством opacity не могут быть прозрачнее чем "родительский" блок. По -тому и текст внутри блока тоже становится прозрачным, что часто ухудшает читаемость.

Чтобы задать прозрачность только фону можно использовать RGBA. Выглядит это так, rgba задается для background: нужного нам блока. RGB это собственно и есть цвета, а A это тоже самое что opacity, и значение указывается в он 0 до 1. Вот так это примерно выглядит background: rgba(r, g, b, a);

Пример: background: rgba(221, 234, 232, 0.6); означает цвет фона блока 221, 234, 232, а прозрачность фона 0.6
При этом все что будет находится в блоке не будет прръозрачным, прозрачным станет только сам фон.

К слову сказать прозрачность выглядит эффектно, но тут главное не переусердствовать, а то сайт будет слишком красивый и не очень удобно и четко читаемый.

Этот домен продается здесь: telderi.ru, и еще много других