Прозрачность элемента (filter-opacity)link

https://dev.ru.simai.io/ru/ui/utility/filter/filter-opacity.php

Данные модификаторы позволяют задавать степень прозрачности элемента через CSS filter.

Классыlink

Описаниеlink

Модификаторы filter-opacity-{0...9,full} устанавливают прозрачность элемента.

• filter-opacity-0 делает элемент полностью прозрачным.
• filter-opacity-full делает элемент полностью непрозрачным.
• filter-opacity-1...9 задают промежуточные значения от 10% до 90%.

Также можно использовать hover:filter-opacity-* для изменения прозрачности при наведении.

Синтаксисlink

• filter-opacity-0 ... filter-opacity-9 и filter-opacity-full — задать степень прозрачности.
• hover:filter-opacity-* — изменить прозрачность при наведении.

Пример использованияlink

<div class="filter-opacity-0 p-4 bg-primary color-on-surface-inverse">Невидимый элемент</div>
<div class="filter-opacity-5 p-4 bg-secondary m-top-2">50% прозрачности</div>
<div class="filter-opacity-5 hover:filter-opacity-full p-4 bg-tertiary m-top-2 transition">
  Наведи, чтобы сделать непрозрачным
</div>

Playgroundlink