mask-position

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propriété CSS mask-position indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété mask-origin.

css
/* Valeurs avec un mot-clé */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/* Valeurs de <position> */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* Valeurs multiples */
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

/* Valeurs globales */
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: unset;

Syntaxe

Cette propriété s'utilise avec une ou plusieurs valeurs de position, séparées par des virgules.

Valeurs

<position>

Une position CSS (type <position>) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.

Définition formelle

Valeur initiale0% 0%
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Pourcentagesfait référence à la taille du masque pour la zone de pointure moins la taille du masque pour la taille de l'image (voir background-position)
Valeur calculéeDeux mots-clés décrivant l'origine et deux représentant les décalages par rapport à cette origine. Chaque valeur est fournie comme une longueur absolue ou comme un pourcentage.
Type d'animationune liste répétable

Syntaxe formelle

mask-position = 
<position>#

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
<length> |
<percentage>

Exemples

Définir la position du masque

Dans le fragment de code qui suit, vous pouvez modifier la valeur de mask-position avec une des valeurs autorisées (voir ci-avant) pour observer l'effet de la propriété.

Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de la propriété -webkit-mask-position.

Spécifications

Specification
CSS Masking Module Level 1
# the-mask-position

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi