mask-type

Ejemplos

Ejemplo básico

Usa 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-alpha, la opacidad de la máscara SVG determina la visibilidad del elemento enmascarado.

Responsive design

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

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

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