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 en particular. Puede agregar una máscara a una imagen usando la propiedad mask-image en CSS. En este artículo, conocerá los diferentes valores de propiedad de la propiedad mask-image y sus diferentes usos.
Sintaxis:
mask-image: none | <make-source> | <image> | inherit | initial | unset
El valor de la propiedad:
- ninguno: no se establece ninguna capa de máscara y se establece una capa negra transparente.
- <make-source> : Se usa para dar la fuente de la URL de la imagen.
- <imagen> : utiliza un degradado lineal como imagen de máscara.
- heredar: hereda la propiedad de la máscara del padre.
- initial: aplica la configuración predeterminada de la propiedad, es decir, match-source.
- unset: descarta la propiedad de máscara actual del elemento.
Ejemplo 1: Usar el valor de la propiedad <make-source> .
Sintaxis:
mask-image: url();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using make-source property value</title>
<style>
body {
background-color: #fff;
}
.container {
width: 335px;
height: 334px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210820105343/gfg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-box-image: url(STAR.svg);
mask: url(STAR.svg);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Producción:
Ejemplo 2: Usar el valor de la propiedad <imagen> .
Sintaxis:
mask-image: linear-gradient();
Nota: si hay 100 % de negro en la máscara de la imagen, la imagen será completamente visible, todo lo que sea 100 % transparente estará completamente oculto y cualquier valor intermedio (0-100) enmascarará parcialmente la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using image property</title>
<style>
body {
background-color: #fff;
}
.container {
width: 135px;
height: 134px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210820105343/gfg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(
to top, transparent 20%, black 80%);
mask-image: linear-gradient(
to top, transparent 20%, black 80%);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA