La propiedad mask-image en CSS se usa para establecer la máscara de una imagen o un texto. Se utiliza para formar una capa de máscara para un elemento particular en CSS.
Sintaxis:
mask-image: none | <mask-source>
- ninguno: no se establece ninguna capa de máscara y se establece una capa negra transparente.
Sintaxis:
mask-image: none
Ejemplo:
En este ejemplo, no se crea ninguna máscara.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container{
background-color: green;
background-repeat: no-repeat;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.mask{
background:black;
width: 200px;
height: 200px;
-webkit-mask-image: none;
}
.mask h1{
height: 400px;
width: 400px;
}
wrap text h1
</style>
<body>
<div class="container">
<div class="mask"></div>
</div>
</body>
</html>
Producción:
<mask-source>: Se usa para dar la fuente de la URL de la imagen.
Sintaxis:
mask-image: url();
Ejemplo :
El icono es una máscara sobre el color de fondo que es negro. Se puede cambiar según sea necesario.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container{
background-color: green;
background-repeat: no-repeat;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.mask{
background:black;
width: 200px;
height: 200px;
-webkit-mask-image: url(
"https://image.flaticon.com/icons/svg/942/942195.svg");
}
.mask h1{
height: 400px;
width: 400px;
}
wrap text h1
</style>
<body>
<div class="container">
<div class="mask"></div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- cromo 1
- Borde 79
- Firefox 53
- Ópera 15
- Safari 15.4