Ajouter un masque à une image en utilisant CSS
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;
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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
