-webkit-mask-box-image CSS-Eigenschaft
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 nicht standardisierte, mit einem Präfix versehene -webkit-mask-box-image Shorthand-Eigenschaft legt das Maskenbild für den Rahmen eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich auf keiner Standardspur. Erwägen Sie stattdessen die Verwendung der mask-border-Eigenschaft.
Bestandteile der Eigenschaft
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Die Werte umfassen das <image>, das als Maskenrahmen verwendet werden soll, und optional vier Abstände zum Rand sowie bis zu zwei Wiederholungsstile für den Rahmen.
Syntax
/* default */
-webkit-mask-box-image: none;
/* image */
-webkit-mask-box-image: url("image.png");
/* image edge-offset */
-webkit-mask-box-image: url("image.png") 10 20 20 10;
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px;
/* image repeat-style */
-webkit-mask-box-image: url("image.png") space repeat;
/* image edge-offset repeat-style */
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px space repeat;
/* Global values */
-webkit-mask-box-image: inherit;
-webkit-mask-box-image: initial;
-webkit-mask-box-image: revert;
-webkit-mask-box-image: revert-layer;
-webkit-mask-box-image: unset;
Werte
<image>-
Die Position der Bildressource, die als Maskenbild verwendet werden soll,
<gradient>oder ein anderer<image>-Wert. none-
Wird verwendet, um anzugeben, dass ein Rahmenfeld kein Maskenbild haben soll.
<length>-
Die Größe des Offsets der Maskenbildes. Siehe
<length>für mögliche Einheiten. <percentage>-
Das Offset des Maskenbildes hat einen Prozentwert relativ zur entsprechenden Dimension (Breite oder Höhe) des Rahmenfeldes.
<number>-
Die Größe des Offsets der Maskenbildes in Pixeln.
repeat-
Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um das Rahmenfeld zu überspannen. Es kann ein Teilbild enthalten, wenn das Maskenbild nicht gleichmäßig in das Rahmenfeld passt.
stretch-
Das Maskenbild wird gedehnt, um das Rahmenfeld genau zu enthalten.
round-
Das Maskenbild wird etwas gedehnt und wiederholt, sodass am Ende des Rahmenfeldes kein Teilbild vorhanden ist.
space-
Das Maskenbild wird so oft wie möglich wiederholt, ohne gedehnt zu werden. Am Ende des Rahmenfeldes gibt es kein Teilbild.
Die Abstands- oder Randversatzwerte definieren die Abstände von den oberen, rechten, unteren und linken Rändern des Bildes, in dieser Reihenfolge. Die Werte können als <length>, <number> oder <percentage> festgelegt werden, wobei Zahlen als Pixellängen interpretiert werden.
Rahmen-Wiederholungsstile werden bei Angabe in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert erklärt wird, gilt dieser für beide Achsen. Während sie background-repeat ähneln, werden die cover- und contain-Werte nicht unterstützt.
Formale Definition
- Anfangswert:
none - Gilt für: alle Elemente
- Vererbt: nein
- Berechneter Wert: wie angegeben
Formale Syntax
-webkit-mask-box-image =
<mask-image-source> [ <mask-image-offset>{4} <mask-border-repeat>{1,2} ]
Beispiele
Ein Bild festlegen
.example-one {
-webkit-mask-box-image: url("mask.png");
}
Ein Bild versetzen und ausfüllen
.example-two {
-webkit-mask-box-image: url("logo.png") 100px 100px 0px 0px round round;
}
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Siehe auch
- CSS
mask-border-Eigenschaft - CSS
border-image-Eigenschaft - Safari CSS-Referenz:
-webkit-mask-box-image