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.
Die mask-position-Eigenschaft CSS legt die anfängliche Position relativ zur Maskenpositionsebene fest, die durch mask-origin festgelegt wird, für jedes definierte Maskenbild.
Syntax
/* Keyword values */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;
/* <position> values */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;
/* Multiple values */
mask-position: top right;
mask-position:
1rem 1rem,
center;
/* Global values */
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: revert-layer;
mask-position: unset;
Ein oder mehrere <position>-Werte, getrennt durch Kommata.
Werte
<position>-
Ein bis vier Werte, die eine 2D-Position in Bezug auf die Ränder des Elementrahmens darstellen. Relative oder absolute Versätze können angegeben werden. Beachten Sie, dass die Position außerhalb des Elementrahmens festgelegt werden kann.
Formale Definition
| Initialer Wert | 0% 0% |
|---|---|
| Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen |
| Vererbt | Nein |
| Prozentwerte | beziehen sich auf die Größe des Maskenzeichenbereichs minus der Größe des Maskenebenenbildes (siehe den Text zu background-position) |
| Berechneter Wert | Besteht aus zwei Schlüsselwörtern, die den Ursprung und die beiden Versätze vom Ursprung repräsentieren, wobei beide als absolute Länge angegeben werden (falls eine <length> angegeben wurde), ansonsten einen Prozentwert. |
| Animationstyp | a repeatable list |
Formale Syntax
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>
Beispiele
Maskenposition festlegen
Ändern Sie den mask-position-Wert in einen der oben beschriebenen zulässigen Werte.
Wenn Sie das Beispiel in einem auf Chromium basierenden Browser ansehen, ändern Sie den Wert von -webkit-mask-position.
Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-position |
Browser-Kompatibilität
BCD tables only load in the browser