Tamaño de la máscara - Trucos CSS

En CSS, la propiedad mask-size especifica el tamaño de una imagen de capa de máscara. En muchos sentidos, funciona de manera muy similar a la background-sizepropiedad.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

El enmascaramiento le permite mostrar partes seleccionadas de un elemento mientras oculta el resto. El tamaño de la máscara está definido por la mask-sizepropiedad.

En la siguiente demostración, puede jugar con el tamaño de la imagen de la capa de máscara:

Sintaxis

mask-size: = ( = | | auto )(1,2) | cover | contain

• Valor inicial: auto
• Se aplica a: Todos los elementos. En SVG, se aplica a elementos de contenedor excluyendo el elemento, todos los elementos gráficos y el elemento
• Heredado: no
• Tipo de animación: lista repetible

Eso es básicamente decir que la sintaxis acepta un valor de tamaño de fondo ( ) que puede ser una o dos longitudes y / o porcentajes ( ), establecido en auto, o una de dos palabras clave ( covery contain).

• Cuando se utilizan dos valores , el primer valor especifica el ancho de la imagen de máscara y el segundo valor especifica su altura .
• Cuando se usa un valor que no es contener o cubrir, define el ancho de la imagen de la máscara y se supone que la altura es auto.

Valores

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Definiciones de valor

• : Cualquier longitud CSS válido y no negativo, como px, em, remy %, entre otros.
• : Especifica el tamaño de la imagen de la capa de máscara como un valor de porcentaje relativo al área de posición de la máscara, que se establece mediante el valor de mask-origin. De forma predeterminada, este valor es border-box, lo que significa que contiene bordes, relleno y contenido del cuadro.
• auto: Se utiliza la altura y el ancho intrínsecos de la imagen de la máscara y, para imágenes como degradados que no tienen dimensiones intrínsecas, se procesa con el tamaño del área de posicionamiento de la máscara.
• contain: Escala la imagen de la máscara conservando su proporción intrínseca de manera que tanto su ancho como su altura pueden caber dentro del área de posicionamiento de la máscara. Para las imágenes como degradados que no tienen dimensiones intrínsecas, se renderiza al tamaño del área de posicionamiento de la máscara.
• cover: Escala la imagen de la máscara conservando su proporción intrínseca de manera que tanto su ancho como su altura pueden cubrir por completo el área de colocación de la máscara. Para las imágenes como degradados que no tienen dimensiones intrínsecas, se renderiza al tamaño del área de posicionamiento de la máscara.
• initial: Aplica la configuración predeterminada de la propiedad, que es auto.
• inherit: Adopta el valor de tamaño de máscara del padre.
• unset: Elimina la corriente mask-sizedel elemento.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para los tamaños de máscara y cada valor se aplica a una imagen de capa de máscara correspondiente especificada en la mask-imagepropiedad.

En el siguiente ejemplo, el primer valor especifica el tamaño de la primera imagen, el segundo valor especifica el tamaño de la segunda imagen, y así sucesivamente.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

El autovalor

Si el valor de la mask-sizepropiedad se especifica como auto, así:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Entonces la imagen de la máscara se escala en las direcciones correspondientes para mantener su relación de aspecto. Dicho esto, podemos obtener varios resultados dependiendo de las dimensiones y proporciones intrínsecas de la imagen.

Proporción / dimensión	Sin dimensiones intrínsecas	Una dimensión intrínseca	Ambas dimensiones intrínsecas
Tiene proporcion	Representado como si se hubiera especificado contener en su lugar	Representado en el tamaño determinado por esa dimensión y la proporción	Renderizado en ese tamaño
Sin proporcion	Representado al tamaño del área de posicionamiento de la máscara	Representado utilizando la dimensión intrínseca y la dimensión correspondiente del área de posicionamiento de la máscara	N / A

Si el valor de mask-sizese especifica con autoy otro valor no automático como el siguiente:

.element ( mask-size: auto 200px; )

… entonces:

• si la imagen tiene una proporción intrínseca , el valor automático se calcula utilizando la dimensión especificada y la proporción intrínseca.
• si la imagen no tiene proporción intrínseca , el valor automático se convierte en la dimensión intrínseca correspondiente de la imagen si existe y, si no la tiene, auto será la dimensión correspondiente del área de posicionamiento de la máscara.

Comprensión coverycontain

El siguiente video explica cómo funcionan las palabras clave contener y cubrir. Tenga en cuenta que la posición inicial de una capa de máscara está en el centro del área de posicionamiento:

Si la imagen no tiene una relación de aspecto intrínseca, especificar cubrir o contener representa la imagen de la máscara al tamaño del área de posición de la máscara.

¿Y qué diablos es una dimensión intrínseca y una proporción intrínseca?

Las dimensiones intrínsecas son el ancho y la altura de un elemento y la proporción intrínseca es la proporción de ellos.

• Una imagen de mapa de bits como un formato PNG, siempre tiene dimensiones intrínsecas y una proporción intrínseca.
• Una imagen vectorial, como un formato SVG, puede tener ambas dimensiones intrínsecas. Por tanto, también tiene una proporción intrínseca. También puede tener una o ninguna dimensión intrínseca y, en cualquier caso, puede tener o no una proporción intrínseca.
• Los degradados son como imágenes sin dimensiones ni proporciones intrínsecas.

Soporte de navegador

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	18+	53+	Todos	4+	70

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	mini Opera
85+	79+	4.4+	Todos	Todos

Manifestación

La siguiente demostración usa una longitud para el tamaño de la máscara. Intente cambiar el valor a otros tipos de valores en el código y verifique el resultado.

Más información

• Módulo de enmascaramiento CSS Nivel 1
• Recorte y enmascaramiento en CSS
• Recorte frente a enmascaramiento: cuándo usar cada uno
• # 185: Jugando con máscaras CSS (video)