La propiedad CSS mask-size establece el tamaño de la imagen de la máscara en el área de pintura de la máscara.
Sintaxis:
mask-size: Keyword values /* Or */ mask-size: One-values /* Or */ mask-size: Two-values /* Or */ mask-size: Multiple-values /* Or */ mask-size: Global values
Valores de la propiedad: Esta propiedad acepta los valores mencionados anteriormente y descritos a continuación:
- Valores de palabras clave: este valor de propiedad se refiere a los valores definidos con unidades como cubrir, contener, etc.
- Valores únicos: este valor de propiedad se refiere a los valores definidos con unidades como %, em, px, etc. La altura está configurada en automático. Su sintaxis básica es tamaño de máscara: ancho de la imagen;
- Dos valores: este valor de propiedad hace referencia a los valores definidos con unidades como %, em, px, etc. La altura se establece en automático. Su Sintaxis Básica es mask-size: ancho de la imagen alto de la imagen;
- Valores múltiples: este valor de propiedad se refiere a los valores definidos con unidades como %, px, em, auto, etc.
- Valores globales: el valor de esta propiedad se refiere a los valores definidos con unidades como heredar, inicial, unset, etc.
Ejemplo 1: el siguiente ejemplo ilustra la propiedad de tamaño de máscara usando valores únicos
html
<!DOCTYPE html>
<html>
<head>
<style>
.Container{
width:25%;
height:200px;
box-sizing:border-box;
border:1px solid green;
}
.geeks{
width: 60%;
height:200px;
background: green;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat:no-repeat;
mask-size: cover;
}
</style>
</head>
<body>
<div class="Container">
<div class="geeks"></div>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente ejemplo ilustra la propiedad de tamaño de máscara usando dos valores
html
<!DOCTYPE html>
<html>
<head>
<style>
.Container{
width:25%;
height:200px;
box-sizing:border-box;
border:1px solid green;
}
.geeks{
width: 60%;
height:200px;
background: green;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat:no-repeat;
mask-size: 40% 80%;
}
</style>
</head>
<body>
<div class="Container">
<div class="geeks"></div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- cromo 4
- Firefox 53
- Safari 15.4
- Ópera 15
- Borde 79
- Internet Explorer (no compatible)
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA