Фон в оттенках серого элемента (backdrop-grayscale)link

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

Данный модификатор позволяет управлять отображением фона элемента в оттенках серого.

Классы и их значенияlink

Класс Значение
.backdrop-grayscale-none backdrop-filter: grayscale(0)
.backdrop-grayscale backdrop-filter: grayscale(1)

Описаниеlink

  • backdrop-grayscale-none — нормальная цветопередача фона.
  • backdrop-grayscale — переводит фон в оттенки серого.

Вы можете использовать hover: для изменения состояния при наведении, например: hover:backdrop-grayscale.

Синтаксисlink

  • {модификатор}: backdrop-grayscale-{none| }
  • Без адаптивности, поддержка hover: доступна.

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

<!-- При наведении фон станет оттенком серого -->
<div class="backdrop-grayscale-none hover:backdrop-grayscale p-4 bg-primary color-on-surface-inverse transition">
  Наведи, чтобы фон стал серым
</div>