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 -webkit-mask-origin
CSS Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der -webkit-mask-position
Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn -webkit-mask-attachment
fixed
ist.
Initialwert | padding |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | wie angegeben |
Animierbar | Nein |
Kanonische Reihenfolge | Reihenfolge des Auftretens in der formalen Grammatik der Werte |
Syntax
[ padding | border | content ][, [ border | padding | content ]]*
Werte
- padding
- Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist
"0 0
" die linke obere Ecke des Randes des Innenabstands, "100% 100%
" ist die untere rechte Ecke.) - border
- Die Position des Maskenbildes ist relativ zum Rand.
- content
- Das Maskenbild ist relativ zum Inhalt.
Beispiele
.example { border: 10px double; padding: 10px; -webkit-mask-image: url('mask.png'); /* Das Maskenbild ist innerhalb des Innenabstands. */ -webkit-mask-origin: content; }
div { -webkit-mask-image: url('mask1.png'), url('mask2.png'); -webkit-mask-origin: padding, content; }
Browser Kompatibilität
Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1.0 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | 4.0 |
Merkmal | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Grundlegende Unterstützung | 2.1 | ? | ? | ? | 3.2 |
Siehe auch
-webkit-mask
, -webkit-mask-box-image
, -webkit-mask-attachment
, -webkit-mask-image
,-webkit-mask-composite
, -webkit-mask-repeat
, -webkit-mask-clip