-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 standardmäßige, mit einem Präfix versehene -webkit-mask-box-image-Kurzschreibweise legt das Maskenbild für den Randbereich eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich nicht auf einem Standardweg. Erwägen Sie stattdessen die Verwendung der mask-border-Eigenschaft.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Die Werte umfassen das <image>, das als Maskenrand verwendet werden soll, und optional vier Randabstandswerte und bis zu zwei Wiederholungsstile für den Rand.
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 Randbereich kein Maskenbild haben soll.
<length>-
Die Größe des Versatzes des Maskenbilds. Siehe
<length>für mögliche Einheiten. <percentage>-
Der Versatz des Maskenbilds hat einen Prozentwert relativ zur entsprechenden Dimension (Breite oder Höhe) des Randbereichs.
<number>-
Die Größe des Versatzes des Maskenbilds in Pixeln.
repeat-
Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um den Randbereich zu überbrücken. Ein Teilbild kann enthalten sein, wenn das Maskenbild nicht gleichmäßig in den Randbereich passt.
stretch-
Das Maskenbild wird gedehnt, um den Randbereich genau zu füllen.
round-
Das Maskenbild wird etwas gedehnt und wiederholt, sodass es am Ende des Randbereichs kein Teilmaskenbild gibt.
space-
Das Maskenbild wird so oft wie möglich ohne Dehnung wiederholt. Es gibt kein Teilmaskenbild am Ende des Randbereichs.
Die Versatzwerte oder Kantenabstände 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 Pixelwerte interpretiert werden.
Die Randwiederholungsstile, falls enthalten, werden in der Reihenfolge von <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert deklariert ist, gilt dieser Wert für beide Achsen. Während sie background-repeat ähnlich sind, werden die Werte cover und contain nicht unterstützt.
Formale Definition
- Initialwert:
none - Gilt für: alle Elemente
- Vererbung: 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 einstellen
.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-Referenz:
-webkit-mask-box-image