oujood.com

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

Ce chapitre traite de la propriété CSS mask-size. Découvrez sa définition, son utilisation, sa syntaxe générale, les valeurs possibles, des exemples et des conseils d'utilisation pour optimiser son utilisation

chercher |

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éfautauto
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion4 -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



Voir aussi nos tutoriel :

Balise optgroup

Définit un groupe d'options liées dans une liste déroulante

fonction strnatcasecmp

Comparaison de chaînes avec l'algorithme d'"ordre naturel" (insensible la casse)

background-repeat

Définit la façon dont une image de fond sera répété