Propriété CSS mask-size

La propriété CSS mask-size

La propriété CSS mask-size permet de définir la taille de la zone de masquage. Il s'agit d'une propriété qui peut être utilisée avec la propriété mask-image pour créer des effets de masquage complexes sur des éléments HTML.

Syntaxe générale

La syntaxe générale de la propriété CSS mask-size est la suivante :

	mask-size: auto|size|contain|cover|initial|inherit;

Valeurs possibles

Les valeurs possibles pour la propriété CSS mask-size sont :

auto : la taille de la zone de masquage est déterminée par la taille de l'élément HTML
size : la taille de la zone de masquage est définie en utilisant des unités CSS telles que px, em, etc.
contain : la taille de la zone de masquage est déterminée en fonction de la taille de l'image masquante
cover : la taille de la zone de masquage est déterminée en fonction de la taille de l'image masquante et de la taille de l'élément HTML
initial : définit la valeur par défaut de la propriété
inherit : hérite de la valeur parente

Exemples

Considérons le code HTML suivant :


	<div class="masked-element"></div>

Pour définir la taille de la zone de masquage à 200px par 200px, nous pouvons utiliser le code CSS suivant :


	.masked-element {
		mask-size: 200px 200px;
	}

Pour définir la taillede la zone de masquage en utilisant la valeur contain, nous pouvons utiliser le code CSS suivant :


.masked-element {
mask-size: contain;
}

Conseils et astuces d'utilisation

Assurez-vous d'utiliser une image suffisamment grande pour le masquage afin d'obtenir les meilleurs résultats.
Si vous utilisez la valeur contain, il est recommandé de redimensionner l'image masquante pour qu'elle soit proportionnelle à la taille de l'élément HTML.
Pour obtenir des effets de masquage plus complexes, vous pouvez utiliser des images transparentes et des couleurs d'arrière-plan pour les combiner.

En utilisant la propriété CSS mask-size de manière judicieuse, vous pouvez créer des effets de masquage élégants et professionnels sur vos éléments HTML.

Valeurs par défaut	auto
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.maskSize="100px 200px";

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	4 -webkit-	15 -webkit-

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété mask-size </title>
  
<style>
.mask1 {
  width: 600px;
  height: 400px;
  background: green;
  border:solid red 10px;
  padding: 50px;
 -webkit-mask-image: url(images/LOGOmASK.png);
  mask-image: url(images/LOGOmASK.png);
   -webkit-mask-size: 200px;
  mask-size: 200px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
 
}

.mask2 {
  width: 600px;
  height: 400px;
  background: green;
  border:  solid red 10px;
  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;     
}
</style>
</head>
<body>

<h1>La propriété css mask-size </h1>

<h3>Définir mask-size : 200px </h3>
<div class="mask1">
  <img src="images/village.png" alt="village " width="600" height="400">
</div>

<h3>Définir mask-size: 50% </h3>
<div class="mask2">
  <img src="images/village.png" alt="village " width="600" height="400">
</div>
</body>
</html>

Valeurs de la propriété css

Liste des propriétés css

Définir la taille de la zone de masquage avec la propriété CSS mask-size

Les propriétés CSS par ordre alphabétique