Справочник HTML & CSS

opacity

Прозрачность всего элемента вместе с содержимым.

Синтаксис

opacity: 0…1;

Значения

Параметр	Тип	Описание
number	0–1	От 0 (невидим) до 1 (непрозрачен).
%	percentage	То же в процентах: `50%`.

Примеры

Разная прозрачность:

<style>
  img { width: 100px; }
</style>
 
<img src="/media/photo-200x200.jpg" alt="" style="opacity: 1;">
<img src="/media/photo-200x200.jpg" alt="" style="opacity: 0.5;">
<img src="/media/photo-200x200.jpg" alt="" style="opacity: 0.2;">

Проявление при наведении:

<style>
  .fade { opacity: 0.4; transition: opacity 0.3s; }
  .fade:hover { opacity: 1; }
</style>
 
<button class="fade">Hover to show fully</button>

Примечания

opacity действует и на детей, и сделать их непрозрачнее родителя нельзя. Для прозрачного фона с непрозрачным текстом берите полупрозрачный цвет: background: rgb(0 0 0 / 0.5). Элемент с opacity: 0 невидим, но на него по-прежнему можно нажать.

См. также

visibility — Скрывает элемент, но сохраняет занятое им место.
transition — Плавно анимирует изменение свойства от старого значения к новому.
color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).

Вопросы и ответы по теме

В учебнике

Цвета — Цвет текста и фона, способы записи цвета в CSS — названия, hex, rgb() и hsl() — и прозрачность.

Спасибо, что читаете!