-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 Kurzschrift Eigenschaft legt das Maskenbild für den Randkasten eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich nicht auf einem Standardschiene. Erwägen Sie stattdessen die Verwendung der mask-border Eigenschaft.
Zugehörige Eigenschaften
Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:
Die Werte umfassen das <image>, das als Maskenrand verwendet wird, und optional vier Randversatzwerte und bis zu zwei Randwiederholungsstile.
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 Standort 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 Prozentwert relativ zur entsprechenden Dimension des Randkastens (Breite oder Höhe).
<number>-
Die Größe des Versatzes des Maskenbildes in Pixeln.
repeat-
Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um den Randkasten zu überspannen. Kann ein Teilbild enthalten, wenn das Maskenbild nicht gleichmäßig in den Randkasten passt.
stretch-
Das Maskenbild wird gedehnt, um den Randkasten exakt zu umfassen.
round-
Das Maskenbild wird etwas gedehnt und wiederholt, so dass kein Teilbild am Ende des Randkastens vorhanden ist.
space-
Das Maskenbild wird so oft wie möglich ohne Dehnung wiederholt. Es gibt kein Teilbild am Ende des Randkastens.
Die Versatzwerte, 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> gesetzt werden, wobei Zahlen als Pixellängen interpretiert werden.
Randwiederholungsstile, wenn sie enthalten sind, werden in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert deklariert ist, ist der Wert für beide Achsen gleich. Ä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 setzen
.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-borderEigenschaft - CSS
border-imageEigenschaft - Safari CSS Referenz:
-webkit-mask-box-image