filter: invert()

Ejemplos

Ejemplo básico

Usa utilidades como invert e invert-20 para controlar la inversión de color de un elemento:

invert-0

invert-20

invert

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

Usando un valor personalizado

Usa la sintaxis invert-[<value>] para establecer el color inversion basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis invert-(<custom-property>) :

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

Esto es solo un atajo para invert-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad filter: invert() con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.