Enmascaramiento CSS
Con el enmascaramiento CSS, crea una capa de máscara para colocar sobre un elemento para ocultar parcial o totalmente partes del elemento.
La propiedad de imagen de máscara CSS
La propiedad CSS mask-imageespecifica 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 <máscara> SVG .
Compatibilidad con navegador
Nota: la mayoría de los navegadores solo admiten parcialmente el enmascaramiento de CSS. Deberá 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.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Usar 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 mask-imagepropiedad especifica la imagen que se utilizará como capa de máscara para un elemento.
La mask-repeatpropiedad especifica si se repetirá una imagen de máscara o cómo. El no-repeat
valor 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 mask-repeatpropiedad, 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);
}
Usar 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:
Cinque Terre es una zona costera dentro de Liguria, en el noroeste de Italia. Se encuentra al oeste de la provincia de La Spezia y comprende cinco pueblos: Monterosso al Mare, Vernazza, Corniglia, Manarola y Riomaggiore.
Cinque Terre es una zona costera dentro de Liguria, en el noroeste de Italia. Se encuentra al oeste de la provincia de La Spezia y comprende cinco pueblos: Monterosso al Mare, Vernazza, Corniglia, Manarola y Riomaggiore.
Cinque Terre es una zona costera dentro de Liguria, en el noroeste de Italia. Se encuentra al oeste de la provincia de La Spezia y comprende cinco pueblos: Monterosso al Mare, Vernazza, Corniglia, Manarola y Riomaggiore.
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));
}
Usar 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 <mask>elemento SVG 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:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |