Effectue une transformation ROT13
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.
La propriété CSS mask-mode définit le mode d'application d'un masque d'arrière-plan sur un élément.
La syntaxe générale pour définir la propriété mask-mode est la suivante :
mask-mode: <value>;
Les valeurs possibles pour la propriété mask-mode sont :
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>
Valeurs par défaut | match-source |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.maskMode="alpha" |
Explorateur | |||||
---|---|---|---|---|---|
Verssion | non supporté | non supporté | 53.0 | non supporté | non supporté |