mask-size

Ejemplos

Rellenar el contenedor

Utiliza la utilidad mask-cover para escalar la imagen de máscara hasta que llene la capa de máscara, recortando la imagen si es necesario:

<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Rellenar sin recortar

Utiliza la utilidad mask-contain para escalar la imagen de máscara a los bordes exteriores sin recortar ni estirar:

<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Usar el tamaño predeterminado

Utiliza la utilidad mask-auto para mostrar la imagen de máscara en su tamaño predeterminado:

<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Usar un valor personalizado

Usa la sintaxis mask-size-[<value>] para establecer el/la tamaño de la imagen de máscara basándose en un valor completamente personalizado:

<div class="mask-size-[auto_100px] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis mask-size-(<custom-property>) :

<div class="mask-size-(--my-mask-size) ...">  <!-- ... --></div>

Esto es solo un atajo para mask-size-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad mask-size 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-auto md:mask-contain ...">  <!-- ... --></div>

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