mask-mode

Ejemplos

Ejemplo básico

Usa las utilidades mask-alpha, mask-luminance y mask-match para controlar el modo de la 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.

Responsive design

Prefija una utilidad mask-mode con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

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