Définit la façon dont une image de fond sera répété
La Propriété CSS mask-repeat : Définition et utilisation
La propriété CSS mask-repeat détermine la façon dont une image de masque est répétée à l'intérieur d'un élément. Elle est utilisée en conjonction avec la propriété mask-image pour définir l'image à utiliser en tant que masque pour l'élément.
Syntaxp générale
Voici la syntaxe générale de la propriété mask-repeat :
mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Valeurs possibles
La propriété mask-repeat peut prendre les valeurs suivantes :
- repeat : la répétition de l'image de masque se produit à la fois horizontalement et verticalement
- repeat-x : la répétition de l'image de masque se produit uniquement horizontalement
- repeat-y : la répétition de l'image de masque se produit uniquement verticalement
- space : la répétition de l'image de masque se produit à la fois horizontalement et verticalement, en utilisant des espaces pour remplir les espaces restants
- round : la répétition de l'image de masque se produit à la fois horizontalement et verticalement, en utilisant la valeur la plus proche pour remplir les espaces restants
- no-repeat : l'image de masque n'est pas répétée
- initial : Remet la valeur à la valeur par défaut de la propriété
- inherit : cette valeur hérite de la propriété de l'élément parent
Exemples
Voici un exemple d'utilisation de la propriété mask-repeat avec la valeur repeat-x :
Exemple : Copier le code
#element {
mask-image: url(image.png);
mask-repeat: repeat-x;
}
Conseils et astuces d'utilisation
- La propriété mask-repeat ne fonctionne que si l'image de masque est définie avec la propriété mask-image
- Assurez-vous de choisir la bonne valeur en fonction de vos besoins, car chacune des valeurs produit un résultat différent
- N'oubliez pas que la répétition de l'image de masque peut avoir un impact sur la taille de l'élément ainsi que sur la qualité de l'image de masque
| Valeurs par défaut | repeat |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.maskRepeat="no-repeat" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 -webkit- | 79 -webkit- | 53 | 3.1 -webkit- | 15 -webkit- |
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété mask-origine </title>
<style>
.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(images/LOGOmASK.png);
mask-image: url(images/LOGOmASK.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(images/LOGOmASK.png);
mask-image: url(images/LOGOmASK.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
</style>
</head>
<body>
<h1>La propriété css mask-origin </h1>
<h3>Définir mask-origin : border-box :</h3>
<div class="mask1">
<img src="images/village.png" alt="village " width="600" height="400">
</div>
<h3>Définir mask-origin: content-box:</h3>
<div class="mask2">
<img src="images/village.png" alt="village " width="600" height="400">
</div>
</body>
</html>