Con el enmascaramiento CSS, crea una capa de máscara para ocultar parcial o totalmente partes del elemento.
La propiedad mask-image
La propiedad mask-image especifica una imagen de capa de máscara.
La imagen de la capa de máscara puede ser una imagen PNG, una imagen SVG, un degradado CSS o un elemento <mask> SVG.
Compatibilidad con el navegador
Nota: La mayoría de los navegadores solo admiten parcialmente el enmascaramiento de CSS. Deberás usar el prefijo -webkit- además de la propiedad estándar en la mayoría de los navegadores.
Los números de la siguiente tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad. Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Propiedad | Chrome | Edge | Mozilla | Safari | Opera |
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Usa una imagen como capa de máscara
Para usar una imagen PNG o SVG como capa de máscara, use un valor de url() para pasar la imagen de la capa de máscara.
La imagen de la máscara debe tener un área transparente o semitransparente. El negro indica totalmente transparente.
Aquí está la imagen de la máscara (una imagen PNG) que usaremos:
Aquí hay una imagen de Cinque Terre, en Italia:
Ahora, aplicamos la imagen de máscara (la imagen PNG de arriba) como capa de máscara para la imagen de Cinque Terre, Italia:
Ejemplo:
Aquí está el código fuente:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Ejemplo explicado
La propiedad mask-image especifica la imagen que se utilizará como capa de máscara para un elemento.
La propiedad mask-repeat especifica si se repetirá una imagen de máscara y cómo se repetirá. El valor no-repeat indica que la imagen de la máscara no se repetirá (la imagen de la máscara solo se mostrará una vez).
Otro ejemplo
Si omitimos la propiedad mask-repeat, la imagen de la máscara se repetirá en toda la imagen de Cinque Terre, Italia:
Ejemplo:
Aquí está el código fuente:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}
Usa degradados como capa de máscara
Los degradados lineales y radiales de CSS también se pueden usar como imágenes de máscara.
Ejemplos de degradado lineal
Aquí, usamos un degradado lineal como capa de máscara para nuestra imagen. Este degradado lineal va de arriba (negro) a abajo (transparente):
Ejemplo:
Use un degradado lineal como capa de máscara:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
Aquí, usamos un degradado lineal junto con una máscara de texto como capa de máscara para nuestra imagen:
Ejemplo:
Use un degradado lineal junto con máscaras de texto como capa de máscara:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Ejemplos de degradado radial
Aquí, usamos un degradado radial (en forma de círculo) como capa de máscara para nuestra imagen:
Ejemplo:
Use un degradado radial como capa de máscara (un círculo):
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Aquí, usamos un degradado radial (con forma de elipse) como capa de máscara para nuestra imagen:
Ejemplo:
Use otro degradado radial como capa de máscara (una elipse):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Usa SVG como capa de máscara
El elemento SVG <mask> se puede utilizar dentro de un gráfico SVG para crear efectos de enmascaramiento.
Aquí, usamos el elemento SVG <mask> para crear diferentes capas de máscara para nuestra imagen:
Ejemplo:
Una capa de máscara SVG (formada como un triángulo):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="<http://www.w3.org/1999/xlink>" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Ejemplo:
Una capa de máscara SVG (formada como una estrella):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="<http://www.w3.org/1999/xlink>" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Ejemplo:
Una capa de máscara SVG (formada como círculos):
<svg width="600" height="400">
<mask id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="<http://www.w3.org/1999/xlink>" xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>
Propiedades de enmascaramiento CSS
La siguiente tabla enumera todas las propiedades de enmascaramiento de CSS:
| Propiedad | Descripción |
mask-image | Especifica una imagen que se utilizará como capa de máscara para un elemento. |
mask-mode | Especifica si la imagen de la capa de máscara se trata como una máscara de luminancia o como una máscara alfa. |
mask-origin | Especifica la posición de origen (el área de posición de la máscara) de una imagen de capa de máscara. |
mask-position | Establece la posición inicial de una imagen de capa de máscara (en relación con el área de posición de la máscara). |
mask-repeat | Especifica cómo se repite la imagen de la capa de máscara. |
mask-size | Especifica el tamaño de una imagen de capa de máscara. |
Traducido con 💚 desde W3Schools.com