-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, mit Präfix versehene -webkit-mask-box-image Kurzschreibweise Eigenschaft legt das Maskenbild für den Rahmenkasten eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich nicht auf einem Standardpfad. Erwägen Sie stattdessen die Verwendung der mask-border-Eigenschaft.
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Die Werte umfassen das <image>, das als Maskenrahmen verwendet werden soll, und optional vier Rahmen-Ausgangswerte und bis zu zwei Rahmen-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 Speicherort der Bildressource, die als Maskenbild verwendet werden soll,
<gradient>oder ein anderer<image>-Wert. none-
Wird verwendet, um anzugeben, dass ein Rahmenkasten 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 Prozentwert relativ zur entsprechenden Dimension (Breite oder Höhe) des Rahmenkastens.
<number>-
Die Größe des Versatzes des Maskenbildes in Pixeln.
repeat-
Das Maskenbild wird so oft wie nötig wiederholt, um den Rahmenkasten zu überspannen. Kann ein Teilbild enthalten, wenn das Maskenbild nicht gleichmäßig in den Rahmenkasten passt.
stretch-
Das Maskenbild wird so gedehnt, dass es genau in den Rahmenkasten passt.
round-
Das Maskenbild wird etwas gedehnt und wiederholt, sodass es kein Teil-Maskenbild am Ende des Rahmenkastens gibt.
space-
Das Maskenbild wird so oft wie möglich ohne Dehnung wiederholt. Es gibt kein Teil-Maskenbild am Ende des Rahmenkastens.
Die Ausgangswerte oder Randversätze definieren die Abstände von den oberen, rechten, unteren und linken Kanten 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 in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert deklariert wird, gilt dieser Wert für beide Achsen. Während ähnlich zu background-repeat, werden die Werte cover und contain nicht unterstützt.
Formale Definition
- Anfangswert:
none - Anwendbar auf: 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
Nicht Teil eines Standards.
Browser-Kompatibilität
Siehe auch
- CSS
mask-border-Eigenschaft - CSS
border-image-Eigenschaft - Safari CSS-Dokumentation:
-webkit-mask-box-image