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 elelemento - 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, comopx,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 demask-origin. De forma predeterminada, este valor esborder-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 esauto.inherit: Adopta el valor de tamaño de máscara del padre.unset: Elimina la corrientemask-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)