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