103 of 313 menu

Propiedad mask

La propiedad mask es una abreviatura para todas las propiedades de enmascaramiento y permite establecer: imagen de máscara, su posición, tamaño, modo de fusión y otros parámetros.

Es una propiedad abreviada para las siguientes propiedades: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaxis

selector {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Valores

Valor	Descripción
`none`	Desactiva el enmascaramiento (valor por defecto)
`url()`	Ruta a la imagen de máscara (SVG, PNG)
`linear-gradient()`	Gradiente lineal como máscara
`radial-gradient()`	Gradiente radial como máscara
`position`	Posición de la máscara (top, center, 50% 50%, etc.)
`size`	Tamaño de la máscara (cover, contain, 100px 50px)
`repeat`	Repetición de la máscara (no-repeat, repeat-x, space)
`mode`	Modo de fusión (alpha, luminance, match-source)
`composite`	Composición de máscaras (add, subtract, intersect, exclude)

Preparación de imágenes

Supongamos que tenemos una imagen de naturaleza que vamos a recortar, e imágenes SVG de un corazón y una flecha, según las cuales recortaremos:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Ejemplo . Máscara de imagen

Apliquemos una máscara de corazón a nuestra imagen:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Ejemplo . Posición de la máscara

Máscara de corazón en la esquina superior izquierda:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Ejemplo . Posición de la máscara

Máscara de corazón en la esquina inferior derecha:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Ejemplo . Posición de la máscara

Máscara de corazón en el centro a la izquierda:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Ejemplo . Posición de la máscara

Máscara de corazón en el centro:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Ejemplo . Posición de la máscara

Máscara de corazón a 100px desde la izquierda y 200px desde arriba:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Ejemplo . Tamaño de máscara cover

El valor cover escala la máscara para que cubra completamente el elemento, manteniendo las proporciones. Puede recortar los bordes de la máscara si las proporciones no coinciden:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Ejemplo . Tamaño de máscara contain

El valor contain escala la máscara para que quepa completamente en el elemento, manteniendo las proporciones. Puede dejar áreas vacías:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Ejemplo . Tamaño de máscara

El tamaño fijo establece dimensiones exactas para la máscara. Por ejemplo, hagamos una máscara de tamaño 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Ejemplo . Repetición no-repeat

El valor no-repeat desactiva la repetición de la máscara. La máscara se muestra solo una vez en la posición especificada:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Ejemplo . Repetición repeat-x

El valor repeat-x repite la máscara solo en el eje horizontal:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Ejemplo . Composición add

El valor add suma varias máscaras (el resultado es la unión de todas las máscaras):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Ejemplo . Composición intersect

El valor intersect muestra solo el área de intersección de las máscaras:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Ejemplo . Composición exclude

El valor exclude muestra las áreas de las máscaras que no se superponen:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Ejemplo . Composición subtract

El valor subtract resta la segunda máscara de la primera. Como ejemplo, hagamos un corazón y restémosle la flecha:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Ejemplo . Notación expandida de mask

La propiedad mask, escrita con sus componentes individuales:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Ejemplo . SVG para imagen

Uso de un elemento SVG como máscara para una imagen:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Ejemplo . SVG para gradiente

Uso de un elemento SVG como máscara para un gradiente:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Véase también

propiedad mask-position,
define la posición de la máscara relativa al elemento
propiedad mask-image,
establece la imagen para la máscara
propiedad mask-mode,
define cómo la máscara interactúa con el fondo
propiedad mask-size,
define el tamaño de la máscara
propiedad mask-repeat,
define la repetición de la máscara
propiedad mask-origin,
define el área de posicionamiento de la máscara
propiedad mask-clip,
define el área de recorte de la máscara
propiedad mask-composite,
define cómo se combinan múltiples máscaras

↑

Español▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.

aceptar todas configurar rechazar