Origen de la máscara - Trucos CSS

El mask-originespecifica el área de posición de la máscara de imagen una capa de máscara de. En otras palabras, define dónde está el origen de la imagen de la capa de máscara, ya sea el borde del borde, el relleno o el cuadro de contenido.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Para los elementos representados como un solo cuadro, mask-originespecifica el área de posición de la máscara. Para los elementos representados como varios cuadros (por ejemplo, cuadros en línea en varias líneas, cuadros en varias páginas), la propiedad especifica en qué cuadros box-decoration-breakopera para determinar el área de posición de la máscara.

Esta propiedad funciona como la background-originpropiedad, excepto que tiene un valor inicial diferente y tres valores adicionales que se aplican a los elementos SVG.

En la siguiente demostración, puede cambiar el origen de la imagen de la capa de máscara. Hay la misma imagen debajo para mostrar el efecto de enmascarar mejor y marcar el borde y las áreas de relleno:

Sintaxis

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Valor inicial: border-box
Se aplica a: Todos los elementos. En SVG, se aplica a los elementos de contenedor excluyendo el elemento, todos los elementos gráficos y el elemento.
Heredado: no
Tipo de animación: discreto

Valores

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Definiciones de valor

content-box: La posición es relativa al cuadro de contenido. El origen de mask-imagese coloca en la esquina superior izquierda del borde del contenido.
padding-box: La posición es relativa al cuadro de relleno. El origen de la imagen de la máscara en 0 0se coloca en la esquina superior izquierda del borde de relleno, 100% 100%es la esquina inferior derecha.
border-box: El valor predeterminado, que establece la posición relativa al cuadro del borde.
margin-box: La posición es relativa al cuadro de margen
fill-box: La posición es relativa al cuadro delimitador del objeto
stroke-box: La posición es relativa al cuadro delimitador del trazo
view-box: Utiliza la ventana gráfica SVG más cercana como cuadro de referencia. Si viewBoxse especifica un atributo para el elemento de creación de la ventana de visualización SVG, el cuadro de referencia se coloca en el origen del sistema de coordenadas establecido por el viewBoxatributo y la dimensión del cuadro de referencia se establece en los valores widthy heightdel viewBoxatributo.
initial: Aplica la configuración predeterminada de la propiedad, que esborder-box
inherit: Adopta el mask-originvalor del padre.
unset: Elimina la corriente mask-origindel elemento.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para los orígenes de la máscara, donde 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 origen de la primera imagen, el segundo valor especifica el origen de la segunda imagen, y así sucesivamente.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Notas

Para los elementos SVG sin caja asociada diseño CSS, los valores content-box, padding-boxy el border-boxcálculo a fill-box.
Para los elementos con la caja CSS asociada diseño, los valores fill-box, stroke-boxy view-boxde cálculo en el initialvalor de mask-origin, que es border-box.

Manifestación

Cuando tenemos la imagen de la capa de máscara repetida, la primera instancia se coloca en la esquina superior izquierda del área de posicionamiento especificada, y luego se repite comenzando desde allí según el valor de la mask-repeatpropiedad.

Cambie el valor de mask-originen la siguiente demostración para tener una mejor idea de lo que está sucediendo: