filter: invert()

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

Class Styles

Class	Styles
`invert`	`filter: invert(100%);`
`invert-<number>`	`filter: invert(<number>%);`
`invert-(<custom-property>)`	`filter: invert(var(<custom-property>))`
`invert-[<value>]`	`filter: invert(<value>);`

invert

filter: invert(100%);

invert-<number>

filter: invert(<number>%);

invert-(<custom-property>)

filter: invert(var(<custom-property>))

invert-[<value>]

filter: invert(<value>);

Примеры

Используйте утилиты типа invert и invert-20 для управления инверсией цветов элемента:

Используйте синтаксис invert-[<value>] , чтобы задать color inversion на основе полностью пользовательского значения:

<img class="invert-[.25] ..." src="/img/mountains.jpg" />

Для переменных CSS вы также можете использовать синтаксис: invert-(<custom-property>)

<img class="invert-(--my-inversion) ..." src="/img/mountains.jpg" />

Это просто сокращение, invert-[var(<custom-property>)] которое автоматически добавляет функцию var().

Префикс a filter: invert() утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="invert md:invert-0 ..." src="/img/mountains.jpg" />

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