Le masquage en CSS est un moyen de masquer des parties de l'élément et d'en afficher d'autres. Un autre est clip-path, mais ne nous concentrons pas là-dessus aujourd'hui. «Les masques sont des images; Les clips sont des chemins »est une façon de penser à la différence, même si cela devient certainement déroutant.
Dans cette vidéo, nous verrons à quel point la similitude masket ses mask-*propriétés sont vraiment similaires aux propriétés backgroundet background-*. Et ils peuvent être bien utilisés ensemble, car un masque est un moyen de cacher certaines parties d'une image tout en révélant le contenu et l'arrière-plan des autres parties.
SVG est idéal pour les masques, car la nature vectorielle leur permet de bien se mettre à l'échelle et la taille de fichier généralement petite est agréable. L'un des éléments déroutants autour des masques est le mask-type. La alphavaleur signifie que les parties transparentes de l'image deviennent les parties transparentes du masque (ce qui est parfois plus hallucinant que vous ne l'espérez). Une luminancevaleur signifie que le blanc est opaque et le noir est transparent et le gris est entre les deux. Ou est-ce l'inverse? Et qu'en est-il des masques qui ont déjà un canal alpha? Et les zones d'un fichier SVG ne contenant rien sont-elles considérées comme transparentes alpha? Probablement? Jouons une pièce.