Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
-webkit-mask-position-x
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die CSS-Eigenschaft-webkit-mask-position-x legt die initiale horizontale Position eines Maskenbildes fest.
Syntax
/* Keyword values */-webkit-mask-position-x: left;-webkit-mask-position-x: center;-webkit-mask-position-x: right;/* <percentage> values */-webkit-mask-position-x: 100%;-webkit-mask-position-x: -50%;/* <length> values */-webkit-mask-position-x: 50px;-webkit-mask-position-x: -1cm;/* Multiple values */-webkit-mask-position-x: 50px, 25%, -3em;/* Global values */-webkit-mask-position-x: inherit;-webkit-mask-position-x: initial;-webkit-mask-position-x: revert;-webkit-mask-position-x: revert-layer;-webkit-mask-position-x: unset;Werte
<length-percentage>Eine Länge, die die Position des linken Rands des Bildes relativ zum linken Innenabstandrand des Kastens angibt. Prozentsätze werden in Bezug auf die horizontale Dimension des Innenabstandsbereichs des Kastens berechnet. Das bedeutet, dass ein Wert von
0%den linken Rand des Bildes mit dem linken Innenabstandrand des Kastens ausrichtet und ein Wert von100%den rechten Rand des Bildes mit dem rechten Innenabstandrand des Kastens ausrichtet.leftEntspricht
0%.centerEntspricht
50%.rightEntspricht
100%.
Formale Definition
| Anfangswert | 0% |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Prozentwerte | beziehen sich auf die Größe der Box selbst |
| Berechneter Wert | für<length> der absolute Wert, ansonsten ein Prozentwert |
| Animationstyp | diskret |
Formale Syntax
-webkit-mask-position-x =
[<length-percentage>|left|center|right]#
<length-percentage> =
<length>|
<percentage>
Beispiele
Horizontale Positionierung eines Maskenbildes
.exampleOne { -webkit-mask-image: url("mask.png"); -webkit-mask-position-x: right;}.exampleTwo { -webkit-mask-image: url("mask.png"); -webkit-mask-position-x: 25%;}Spezifikationen
Kein Bestandteil eines Standards.
Browser-Kompatibilität
Siehe auch
-webkit-mask-position,-webkit-mask-position-y,-webkit-mask-origin