origen-mascarilla

Especifique mask-originel área de posición de la máscara de una imagen de capa de máscara. En otras palabras, defina 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 elementos representados como un solo cuadro, mask-originespecifica el área de ubicación de la máscara. Para elementos representados como cuadros múltiples (por ejemplo, cuadros en línea en varias líneas, cuadros en varias páginas), la propiedad especifica box-decoration-breaken qué cuadros operan para determinar el área de posicionamiento 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: geometry-box = 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 contenedores excluyendo el defselemento, todos los elementos gráficos y el useelemento.
• heredado: no
• Tipo de animación: discreta

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 valores

• content-box: La posición es relativa al cuadro de contenido. El origen de mask-imageestá ubicado 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 0 0está ubicado en la esquina superior izquierda del borde del relleno, 100% 100%es la esquina inferior derecha.
• border-box: El valor predeterminado, que establece la posición relativa al cuadro de 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 gráfica 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 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), url(image2.png), url(image3.png);  mask-origin: padding-box, border-box, content-box;} 

Notas

• Para elementos SVG sin cuadro de diseño CSS asociado, los valores content-boxy padding-boxse border-boxcalculan en fill-box.
• Para elementos con cuadro de diseño CSS asociado, los valores fill-boxy stroke-boxse view-boxcalculan con el initialvalor de mask-origin, que es border-box.

Manifestación

Cuando repetimos la imagen de la capa de máscara, la primera instancia se coloca en la esquina superior izquierda del área de ubicación especificada y luego se repite comenzando desde allí de acuerdo con 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:

Soporte del navegador

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	79+	53+	Hacer	4+	15+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Hacer	Hacer	Hacer	Hacer	59+

Información relacionada

Recorte y enmascaramiento en CSS

Chris Coyier

Enmascaramiento versus recorte: cuándo usar cada uno

Sara Drasner

#185: Jugar con máscaras CSS

Chris Coyier

Propiedades relacionadas

clip de máscara

.element { mask-clip: padding-box; } Mojtaba Seyedi

imagen-mascara

.element { mask-image: url(star.svg); } Chris Coyier

modo máscara

.element { mask-mode: alpha; } Mojtaba Seyedi

posición de la máscara

.element { mask-position: 20px center; } Mojtaba Seyedi

repetición de máscara

.element { mask-repeat: repeat-y; } Chris Coyier

tamaño de máscara

.element { mask-size: 200px 100px; } Mojtaba Seyedi

tipo de máscara

.element { mask-type: alpha; } Mojtaba Seyedi