oujood.com

Masquez l'arrière-plan de vos éléments avec la propriété CSS mask-mode

La propriété CSS mask-mode : découvrez sa syntaxe générale, ses valeurs possibles, des exemples d'utilisation et des conseils pour une utilisation optimale.

chercher |

La propriété CSS mask-mode

La propriété CSS mask-mode définit le mode d'application d'un masque d'arrière-plan sur un élément.

Syntaxe générale

La syntaxe générale pour définir la propriété mask-mode est la suivante :

mask-mode: <value>;

Valeurs possibles

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

  • match-source : le masque suit la forme de la source.
  • luminance : seule la luminance (luminosité) du masque est prise en compte
  • alpha : seul l'alpha (transparence) du masque est pris en compte
  • initial : définit la valeur par défaut de l'élément
  • inherit : hérite de la valeur parente

Exemples d'utilisation

Voici un exemple simple d'utilisation de la propriété mask-mode :

Exemple :       Copier le code

		<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété mask-mode </title>
  
<style>
div{
	background-image : url(images/village.png);
	width:600px;
	height:400px;
}
 .mask1 {
  -webkit-mask-image: url(images/LOGOmASK.png);
  mask-image: url(images/LOGOmASK.png);
  -webkit-mask-size: 70%;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

.mask2 {
  -webkit-mask-image: url(images/LOGOmASK.png);
  mask-image: url(images/LOGOmASK.png);
  -webkit-mask-size: 70%;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}
.mask3 {
  -webkit-mask-image: url(images/LOGOmASK.png);
  mask-image: url(images/LOGOmASK.png);
  -webkit-mask-size: 70%;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: match-source;
}
</style>
</head>
<body>

<h1>oujood.com : La propriété css mask-mode</h1>
<p>
Note: La propriété mask-mode ne fonctionne que dans Firefox !</p>
<h3>L’image du calque de masque traitée comme 
un masque de luminance :</h3>
<div class="mask1">
</div>

<h3>L’image du calque de masque traitée comme
 un masque alpha :</h3>
<div class="mask2">
</div>

<h3>L’image du calque de masque traitée comme 
un masque match-source :</h3>
<div class="mask3">
</div>

<h3>Image originale :</h3>
<img src="images/village.png" alt="village" width="600" height="400">
</html>
	

Conseils et astuces d'utilisation

  • Assurez-vous que l'image utilisée pour le masque a une transparence correcte pour le mode alpha ou une luminance adéquate pour le mode luminance.
  • N'oubliez pas que la propriété mask-mode ne fonctionne qu'avec les navigateurs modernes, il est donc important de faire des tests de compatibilité pour vous assurer que l'effet souhaité est bien visible pour tous les utilisateurs.
Valeurs par défautmatch-source
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.maskMode="alpha"

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
Verssionnon supporténon supporté53.0 non supporté non supporté



Voir aussi nos tutoriel :

fonction str_rot13, str_rot13

Effectue une transformation ROT13

fonction ucwords, ucwords

Met en majuscule la premi re lettre de tous les mots

Balise nav

Définit les liens de navigation