Фильтры

filter: sepia()

Утилиты для применения фильтров сепии к элементу.

ClassStyles
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" />

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков