CSS mask-repeat establece cómo se colocan las imágenes de máscara después de haberlas dimensionado y posicionado. La imagen de la máscara se puede repetir a lo largo de la vertical o la horizontal o en ambos ejes o no repetirse.
Sintaxis:
mask-repeat: One-values /* Or */ mask-repeat: Two-values /* Or */ mask-repeat: Multiple values /* Or */ mask-repeat: Global values
Valores de la propiedad: Esta propiedad acepta los valores mencionados anteriormente y descritos a continuación:
- Valores únicos: este valor de propiedad se refiere a los valores definidos con unidades como espacio, ronda, repetición, repetición-x, repetición-y, no-repetición , etc.
- Dos valores: este valor de propiedad se refiere a los valores definidos con unidades como espacio repetido, espacio redondo, repetición, etc.
- Valores múltiples: este valor de propiedad se refiere a los valores definidos con unidades como espacio redondo, sin repetición, 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 mask-repeat usando valores únicos:
html
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
width: 40%;
height:80px;
background: green;
-webkit-mask-image:
url("image.svg");
mask-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra la propiedad mask-repeat usando dos valores:
html
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
width: 40%;
height:80px;
background: green;
-webkit-mask-image:
url("image.svg");
mask-repeat: space repeat;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
Producción:
Navegadores compatibles:
- cromo 1
- 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