mask-repeat

Ejemplos

Ejemplo básico

Usa la utilidad mask-repeat para repetir la imagen de máscara tanto vertical como horizontalmente:

<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

Repetir horizontalmente

Usa la utilidad mask-repeat-x para repetir la imagen de máscara solo horizontalmente:

<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

Repetir verticalmente

Usa la utilidad mask-repeat-y para repetir la imagen de máscara solo verticalmente:

<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

Prevenir recorte

Usa la utilidad mask-repeat-space para repetir la imagen de máscara sin recortarla:

<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

Prevenir recorte y espacios

Usa la utilidad mask-repeat-round para repetir la imagen de máscara sin recortarla, estirándola si es necesario para evitar espacios:

<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

Deshabilitar repetición

Usa la utilidad mask-no-repeat para evitar que una imagen de máscara se repita:

<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

Responsive design

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

<div class="mask-repeat md:mask-repeat-x ...">
  <!-- ... -->
</div>

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