Maison > Article > interface Web > Ajouter un masque à une image en utilisant CSS
Ajouter un masque à une image en utilisant CSS
- WBOYavant
- 2023-09-04 12:01:021495parcourir
Nous pouvons placer un calque sur un élément pour le masquer partiellement ou complètement. L'attribut mask-image est un attribut CSS utilisé pour spécifier le calque sur l'élément. Il peut également s'agir d'une image, mais nous devons utiliser l'adresse de l'image pour ajouter un masque à l'image.
Dans cet article, nous verrons comment ajouter un masque à une image à l'aide des propriétés CSS et ce que nous pouvons faire de plus avec la même propriété.
Ajouter un masque à l'image
L'attributmask-image est l'attribut que nous utiliserons pour ajouter un masque sur l'image ou le texte souhaité. Cette propriété ajoute un calque qui peut masquer partiellement ou complètement l'image. Pour mieux comprendre cette propriété, jetons un coup d'œil rapide à la syntaxe de la propriété.
Grammaire
mask-image: none, <image>, initial, inherit;Utilisez des valeurs différentes pour la propriété
mask-image, la valeur none n'ajoutera pas de calque de masque mais définira un calque noir transparent sur l'image ou le texte.
Pour mieux comprendre cette propriété, nous allons passer par un exemple pour en savoir plus sur le fonctionnement de la valeur de la propriété mask-image.
Exemple
Dans cet exemple, nous utiliserons la valeur de 5cd061ee8879d3cd5762a51ae91205b7 et ajouterons l'adresse de l'image afin de pouvoir ajouter un masque sur l'image.
Ici, nous avons créé une classe conteneur puis nous sommes déplacés vers la partie CSS. Dans cette partie, nous avons d'abord modifié la hauteur et la largeur, puis utilisé l'attribut masque avec l'image que nous voulions imprimer. Jetons un coup d'œil au résultat que nous obtenons du code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the make-source property</title>
<style>
.contain {
width: 330px;
height: 330px;
background-image: url(
"https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg"
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center;
-webkit-mask-box-image: url(https://www.tutorialspoint.com/images/logo.png);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="contain"></div>
</body>
</html>
C'est le résultat que nous allons obtenir, comme vous pouvez le voir, l'image est maintenant masquée après avoir utilisé l'attribut mask-image.
Nous allons maintenant utiliser les nouvelles valeurs de propriété dans un autre exemple, passons donc à l'exemple suivant.
Exemple
Dans cet exemple, nous allons utiliser l'attribut mask-image et définir sa valeur sur un dégradé linéaire. Passons maintenant au code et comprenons comment fonctionne cet attribut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using mask-image property</title>
<style>
.container {
height: 130px;
width: 130px;
background-image: url(
"https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg");
background-position: center;
background-size: cover;
-webkit-mask-image: linear-gradient(
to top, transparent 19%, black 81%);
background-repeat: no-repeat;
mask-image: linear-gradient(
to top, transparent 19%, black 21%
);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Dans le code ci-dessus, nous créons d'abord un conteneur puis modifions sa hauteur et sa largeur dans la section CSS. Après cela, nous avons ajouté l'image à laquelle nous souhaitons appliquer le masque et défini sa valeur sur un dégradé linéaire à l'aide de la propriété mask-image. Nous définissons la couleur noire à 81 % et transparente à 20 %. Jetons un coup d'œil rapide au code ci-dessus.
Dans l'exemple ci-dessus, vous pouvez voir que l'image est transparente depuis le bas, ce qui signifie que le masque a été appliqué à l'image.
REMARQUE - Si nous définissons la valeur du noir dans le dégradé linéaire à 100%, l'image que nous avons sera complètement visible par l'utilisateur, si nous définissons la transparence à 100%, l'image sera complètement cachée par le masque.
Exemple
Dans l'exemple ci-dessous, nous changeons la valeur de la propriété en dégradé radial, ce qui signifie que le masque sera désormais ajouté sous une forme circulaire, les autres composants du code sont similaires. Voyons le résultat que nous obtiendrons en utilisant le code ci-dessous.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Another example for the image-mask property</title>
<style>
.mask2 {
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
-webkit-mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h1>This is an example of the mask-image property</h1>
<h3>We are using the gradient value</h3>
<div class="mask2">
<img src="https://www.tutorialspoint.com/images/logo.png" width="600" height="400">
</div>
</body>
</html>
Lors de l'exécution de la procédure ci-dessus, vous pouvez voir que le masque apparaît sous une forme circulaire car certaines parties de l'image sont transparentes tandis que d'autres sont sombres.
Pourquoi utilisons-nous le préfixe -webkit ?
Nous utilisons le préfixe -webkit car la plupart des navigateurs ne prennent en charge que partiellement la fonctionnalité de masquage que nous utilisons aujourd'hui. Nous utilisons à la fois le préfixe -webkit et les attributs standard pour assurer la compatibilité avec tous les navigateurs.
Conclusion
Les masques en CSS peuvent masquer partiellement ou complètement les propriétés, selon les valeurs utilisées avec la propriété. Les masques peuvent être utilisés comme des clips de masque, des images de masque, des modes de masque, des origines de masque, etc. La propriété de masquage peut définir un masque sur une image ou un texte, et nous pouvons même modifier la forme du masque que nous avons l'intention d'appliquer. Des masques sont appliqués aux images pour rendre l'utilisateur plus immersif ou pour masquer certaines parties de l'image.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!