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