mask-position
Baseline
2023
Newly available
Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
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.
/* 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 initiale | 0% 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ée | non |
| Pourcentages | fait 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ée | Deux 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'animation | une liste répétable |
Syntaxe formelle
mask-position =
<position>#
<position> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<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
Chargement…