-webkit-mask-box-image
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, prefixed -webkit-mask-box-image Shorthand Eigenschaft legt das Maskenbild für den Randbereich eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich nicht auf einem Standard-Track. Erwägen Sie stattdessen die Verwendung der mask-border-Eigenschaft.
Zusammengesetzte Eigenschaften
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 Rand-Abstandswerte sowie bis zu zwei Rand-Wiederholungsstile.
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>-
Der Ort der Bildressource, die als Maskenbild verwendet werden soll,
<gradient>, oder ein anderer<image>Wert. none-
Wird verwendet, um anzugeben, dass ein Randkasten kein Maskenbild haben soll.
<length>-
Die Größe des Versatzes des Maskenbildes. Siehe
<length>für mögliche Einheiten. <percentage>-
Der Versatz des Maskenbildes hat einen prozentualen Wert relativ zur entsprechenden Dimension (Breite oder Höhe) des Randkastens.
<number>-
Die Größe des Versatzes des Maskenbildes in Pixeln.
repeat-
Das Maskenbild wird so oft wie nötig wiederholt, um den Randkasten zu überspannen. Kann ein Teilbild beinhalten, wenn sich das Maskenbild nicht gleichmäßig in den Randkasten aufteilt.
stretch-
Das Maskenbild wird gedehnt, um den Randkasten genau zu füllen.
round-
Das Maskenbild wird etwas gedehnt und wiederholt, sodass am Ende des Randkastens kein Teilmaskenbild verbleibt.
space-
Das Maskenbild wird so oft wie möglich ohne Dehnung wiederholt. Es gibt am Ende des Randkastens kein Teilmaskenbild.
Die Versatzwerte, oder Randversätze, 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 Pixelabstände interpretiert werden.
Rand-Wiederholungsstile, wenn enthalten, werden in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert deklariert wird, gilt der Wert für beide Achsen. Ähnlich wie bei background-repeat werden die Werte cover und contain 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 füllen
.example-two {
-webkit-mask-box-image: url("logo.png") 100px 100px 0px 0px round round;
}
Spezifikationen
Teil keiner Normen.
Browser-Kompatibilität
Siehe auch
- CSS
mask-border-Eigenschaft - CSS
border-image-Eigenschaft - Safari CSS Reference:
-webkit-mask-box-image