-webkit-mask-origin

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 (en-US) Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn -webkit-mask-attachment fixed ist.

Initialwertborder-box
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs (en-US) Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

<geometry-box>#

wobei
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

wobei
<shape-box> = <box> | margin-box

wobei
<box> = border-box | padding-box | content-box

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

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)

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 (en-US), -webkit-mask-box-image (en-US), -webkit-mask-attachment (en-US), -webkit-mask-image (en-US),-webkit-mask-composite (en-US), -webkit-mask-repeat, -webkit-mask-clip (en-US)