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