-webkit-mask-position-x
Kein Standard: Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.
Die CSS-Eigenschaft -webkit-mask-position-x legt die anfängliche horizontale Position eines Maskenbilds (Bild mit einer Maske) fest.
/* 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 values */
-webkit-mask-position-x: 50px, 25%, -3em;
/* Global values */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;
| Initialwert | 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 |
Syntax
Werte
<length-percentage>- Eine Länge, die die Position der linken Kante des Bildes relativ zur linken Füllkante der Box angibt. Die Prozentsätze werden anhand der horizontalen Abmessung des Box-Padding-Bereichs berechnet. Das heißt, ein Wert von
0%bedeutet, dass die linke Kante des Bildes mit der linken Füllkante der Box ausgerichtet ist und ein Wert von100%bedeutet, dass die rechte Kante des Bildes mit der rechten Füllkante der Box ausgerichtet ist. left- Gleichwertig mit
0%. center- Gleichwertig mit
50%. right- Gleichwertig mit
100%.
Formale Syntax
[ <length-percentage> | left | center | right ]#wobei
<length-percentage> = <length> | <percentage>
Beispiel
.exampleOne {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-x: right;
}
.exampleTwo {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-x: 25%;
}
Spezifikation
Kein Teil einer Spezifikation.
Browser-Kompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format.
Diese Kompatibilitätstabelle liegt noch im alten Format vor,
denn die darin enthaltenen Daten wurden noch nicht konvertiert.
Finde heraus wie du helfen kannst! (en-US)
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | 4.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | ? |