В это записи я хочу с вами поделиться способом того, как сделать прозрачность с помощью CSS.

Полностью прозрачный фон

Пример полностью прозрачности показан в примере ниже:

.block { background-color: transparent; }

Данный стиль уберет задний фон с блока полностью.

Такого же результата можно добиться используя этот код ниже:

.block { background-color: rgba(0, 0, 0, 0); }

Почему же вы итоге получается одно и тоже? В этом примере я использовал rgba(),  данная функция принимает в себя аргументы три аргумента: (r — red) красный цвет, (g — green) зеленый, (b — blue) синий и alpha channel (альфа канал).

Альфа канал отвечает за прозрачность слоя. Если вы хотите установить прозрачность блока, например 10%, то вам нужно указать это так:

.block { background-color: rgba(0, 0, 0, 0.1); }

Вы можете указывать 0.1 или .1, разницы особой нет. Если хотите, чтобы фон снова показывался как надо, то поставьте 1 или укажите background-color: #000 — это вернет все на прежнее место.

PS. Вы так же можете указывать 0.01, 0.02, … 0.99 как значение прозрачности.

Демо

В демо выше я использовал цикл for, чтобы показать этапы прозрачности блока от 0.1 и до 1, то есть от 10% .

Как сделать прозрачность при наведении?

Чтобы посмотреть пример прозрачности при наведении — вы можете воспользоваться демо, которая находится ниже.

Демо

В демо выше используется обычный блок с CSS свойством background-color: #fff; (нет прозрачности) после наведения на блок с классом .block он получается 50% прозрачности из-за свойства background-color: rgba(255, 255, 255, 0.5) . И конечно же я использовал :hover псевдокласс, чтобы поменять свойство при наведении на элемент.

Если у вас остались какие-либо вопросы — вы можете задать их в комментарии ниже.