mask-mode

Ejemplos

Ejemplo básico

Utiliza las utilidades mask-alpha, mask-luminance y mask-match para controlar el modo de máscara de un elemento:

<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>

Al usar mask-luminance, el valor de luminancia de la máscara determina la visibilidad, por lo que usar colores en escala de grises producirá los resultados más predecibles. Con mask-alpha, la opacidad de la máscara determina la visibilidad del elemento enmascarado.

Diseño responsivo

Antepone a la utilidad mask-mode el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="mask-alpha md:mask-luminance ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.