Filtros
filter: grayscale()
Utilidades para aplicar filtros de escala de grises (grayscale) a un elemento.
| Clase | Estilos |
|---|---|
grayscale | filter: grayscale(100%); |
grayscale-<number> | filter: grayscale(<number>%); |
grayscale-(<custom-property>) | filter: grayscale(var(<custom-property>)); |
grayscale-[<value>] | filter: grayscale(<value>); |
Ejemplos
Ejemplo básico
Utiliza utilidades como grayscale y grayscale-75 para controlar la cantidad de efecto de escala de grises aplicado a un elemento:
grayscale-0
grayscale-25
grayscale-50
grayscale
<img class="grayscale-0 ..." src="/img/mountains.jpg" /><img class="grayscale-25 ..." src="/img/mountains.jpg" /><img class="grayscale-50 ..." src="/img/mountains.jpg" /><img class="grayscale ..." src="/img/mountains.jpg" />Usar un valor personalizado
Usa la sintaxis grayscale-[<value>] para establecer el/la escala de grises basándose en un valor completamente personalizado:
<img class="grayscale-[0.5] ..." src="/img/mountains.jpg" />Para variables CSS, también puedes usar la sintaxis grayscale-(<custom-property>) :
<img class="grayscale-(--my-grayscale) ..." src="/img/mountains.jpg" />Esto es solo un atajo para grayscale-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Diseño responsivo
Antepone a la utilidad filter: grayscale() el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<img class="grayscale md:grayscale-0 ..." src="/img/mountains.jpg" />Obtén más información sobre el uso de variantes en la documentación de variantes.