Masquer dans CSS

Parfois, lors de l'ajout d'images à un site Web, il est nécessaire de brouiller, de masquer, d'éclairer ou de concentrer certaines parties d'une image particulière. CSS vous permet de le faire avec une grande facilité et se réfère à cette procédure de masquage.

Le masquage signifie masquer ou couper des images apparaissant sur des sites Web à des points particuliers en utilisant la propriété CSS Mask-Image. Dans cet article, nous discuterons de la façon dont le masquage est effectué de diverses manières en utilisant la propriété Mask-Image.

Commençons.

Propriété de masque-image

La propriété Mask-Image cache complètement ou partiellement des parties d'images en utilisant différents niveaux d'opacité. Un autre objectif de cette propriété est de superposer une image en tant que masque sur un autre.

Syntaxe

Masque-Image: Aucun | Image | URL | Initial | hériter;

Les paramètres sont expliqués ci-dessous.

aucun: Ceci est une valeur par défaut.

image: Cette valeur rend une image qui sera utilisée comme couche de masque.

URL: Cette valeur prend une image ou un élément SVG sous la forme d'une référence URL.

Comprenons le masquage dans CSS en utilisant divers exemples.

Exemple 1

Dans l'exemple ci-dessous, nous masquerons un logo sur une autre image.

Html

Avant le masquage

Après le masquage

CSS

div img
Largeur: 250px;
hauteur: 250px;

.masquage
Largeur: 300px;
hauteur: 300px;
Color en arrière-plan: noir;
-Webkit-mask-box-image: URL (logo.png);

Sortir

Les images ont été masquées avec succès.

Exemple 2

Vous pouvez également utiliser des gradients pour masquer les images. Ci-dessous, nous vous avons présenté un exemple où nous avons créé une ellipse comme masque sur l'image en utilisant le masquage.

Html

Nous avons simplement ajouté une image en utilisant la balise.

CSS

div img
Largeur: 250px;
hauteur: 250px;

.masquage
Largeur: 300px;
hauteur: 300px;
-Webkit-mask-box-image: radial-gradient (ellipse 60% 30% à 50% 50%, gris 60%, RGBA (146, 140, 140, 0.3) 40%);
Border: 3px noir solide;

Dans le code ci-dessus, nous utilisons la fonction radiale de gradient pour masquer une couche sur une image sous la forme d'une ellipse avec une taille de 60% en haut et en bas, et 30% à droite et à gauche. Pendant ce temps, les positions de départ de tous les côtés sont fixées à 50% pour maintenir la forme de l'ellipse au centre. De plus, nous lui avons également donné une couleur de départ et aussi une couleur de fin.

Sortir

Une couche de masque a été ajoutée avec succès à l'image sous la forme d'une ellipse.

Exemple 3

Supposons que vous souhaitiez masquer une couche sous la forme d'un cercle en utilisant des gradients. Voici l exemple de code.

CSS

div img
Largeur: 200px;
hauteur: 200px;

.masquage
Largeur: 250px;
hauteur: 250px;
-Webkit-mask-box-image: radial-gradient (cercle à 50% 50%, gris 60%, RGBA (146, 140, 140, 0.3) 60%);
Border: 3px noir solide;

Pour former un cercle au centre, nous lui avons attribué une position de 50% à tous les côtés avec des couleurs de démarrage et de fin.

Sortir

Un cercle masqué a été créé avec succès.

Conclusion

Le masquage signifie masquer ou couper des images apparaissant sur des sites Web à des points particuliers en utilisant la propriété CSS Mask-Image. La propriété Mask-Image effectue cette tâche en attribuant différents niveaux d'opacité à des parties des images, en outre, il peut masquer une image sur un autre. Il est utile lorsque vous souhaitez brouiller, masquer, égayer ou concentrer certaines parties d'une image particulière. Dans cet article, nous avons discuté de la façon dont le masquage est effectué dans CSS ainsi que des exemples pertinents.