Фильтры
backdrop-filter: grayscale()
Утилиты для применения фильтров оттенков серого к фону элемента.
| Class | Styles |
|---|---|
backdrop-grayscale | backdrop-filter: grayscale(100%); |
backdrop-grayscale-<number> | backdrop-filter: grayscale(<number>%); |
backdrop-grayscale-(<custom-property>) | backdrop-filter: grayscale(var(<custom-property>)); |
backdrop-grayscale-[<value>] | backdrop-filter: grayscale(<value>); |
Примеры
Базовый пример
Используйте утилиты вроде backdrop-grayscale-50 и backdrop-grayscale для управления эффектом оттенков серого, применяемым к фону элемента:
backdrop-grayscale-0
backdrop-grayscale-50
backdrop-grayscale
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-grayscale-0 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-grayscale-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-grayscale-200 ..."></div></div>Использование пользовательского значения
Используйте синтаксис backdrop-grayscale-[<value>] , чтобы задать backdrop grayscale на основе полностью пользовательского значения:
<div class="backdrop-grayscale-[0.5] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: backdrop-grayscale-(<custom-property>)
<div class="backdrop-grayscale-(--my-backdrop-grayscale) ..."> <!-- ... --></div>Это просто сокращение, backdrop-grayscale-[var(<custom-property>)] которое автоматически добавляет функцию var().
Адаптивный дизайн
Префикс a backdrop-filter: grayscale() утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="backdrop-grayscale md:backdrop-grayscale-0 ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.