Masque-origine - Astuces CSS | CSS Almanach 2025

Le mask-originspécifie la zone de position du masque d'une image de calque de masque. En d'autres termes, il définit l'origine de l'image du calque de masque, qu'il s'agisse du bord de la bordure, du remplissage ou de la zone de contenu.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Pour les éléments rendus dans une seule boîte, mask-originspécifie la zone de positionnement du masque. Pour les éléments rendus sous forme de boîtes multiples (par exemple, des boîtes en ligne sur plusieurs lignes, des boîtes sur plusieurs pages), la propriété spécifie les boîtes box-decoration-breaksur lesquelles opère pour déterminer la zone de positionnement du masque.

Cette propriété fonctionne comme la background-originpropriété, sauf qu'elle a une valeur initiale différente et trois valeurs supplémentaires qui s'appliquent aux éléments SVG.

Dans la démo suivante, vous pouvez modifier l'origine de l'image du calque de masque. Il y a la même image en dessous pour montrer l'effet de mieux masquer et de marquer les zones de bordure et de remplissage:

Syntaxe

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Valeur initiale: border-box
S'applique à: Tous les éléments. En SVG, il s'applique aux éléments conteneurs à l'exclusion de l' élément, de tous les éléments graphiques et de l' élément.
Héritée: non
Type d'animation: discret

Valeurs

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Définitions de valeur

content-box: La position est relative à la zone de contenu. L'origine de mask-imageest positionnée dans le coin supérieur gauche du bord du contenu.
padding-box: La position est relative à la zone de remplissage. L'origine de l'image de masque 0 0est positionnée dans le coin supérieur gauche du bord de remplissage, 100% 100%c'est le coin inférieur droit.
border-box: La valeur par défaut, qui définit la position par rapport à la zone de bordure.
margin-box: La position est relative à la zone de marge
fill-box: La position est relative au cadre de délimitation de l'objet
stroke-box: La position est relative à la zone de délimitation du trait
view-box: Utilise la fenêtre SVG la plus proche comme zone de référence. Si un viewBoxattribut est spécifié pour l'élément de création de la fenêtre SVG, la boîte de référence est positionnée à l'origine du système de coordonnées établi par l' viewBoxattribut et la dimension de la boîte de référence est définie sur les valeurs widthet heightde l' viewBoxattribut.
initial: Applique le paramètre par défaut de la propriété, qui estborder-box
inherit: Adopte la mask-originvaleur du parent.
unset: Supprime le courant mask-originde l'élément.

Utiliser plusieurs valeurs

Cette propriété peut prendre une liste de valeurs séparées par des virgules pour les origines de masque, où chaque valeur est appliquée à une image de calque de masque correspondante spécifiée dans la mask-imagepropriété. Dans l'exemple suivant, la première valeur spécifie l'origine de la première image, la seconde valeur spécifie l'origine de la seconde image, et ainsi de suite.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Remarques

Pour les éléments SVG sans boîte de mise en page CSS associée, les valeurs content-box, padding-boxet border-boxCompute à fill-box.
Pour les éléments avec boîte de mise en page CSS associée, les valeurs fill-box, stroke-boxet view-boxcalcul à la initialvaleur mask-origin, ce qui est border-box.

Démo

Lorsque l'image du calque de masque est répétée, la première instance est positionnée dans le coin supérieur gauche de la zone de positionnement spécifiée, puis elle est répétée à partir de là en fonction de la valeur de la mask-repeatpropriété.

Modifiez la valeur de mask-origindans la démo suivante pour avoir une meilleure idée de ce qui se passe: