mask-type

Ejemplos

Ejemplo básico

Utiliza las utilidades mask-type-alpha y mask-type-luminance para controlar el tipo de una máscara SVG:

<svg>  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">    <path d="..."></path>  </mask>  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" /></svg><svg>  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">    <path d="..."></path>  </mask>  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" /></svg>

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

Diseño responsivo

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

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

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