-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 Präfix-Eigenschaft -webkit-mask-box-image ist eine CSS Kurzschrift. Sie legt das Maskenbild für den Rahmenkasten eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich nicht auf der Spur zu einem Standard. Überlegen Sie, stattdessen die Eigenschaft mask-border zu verwenden.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:
Die Werte umfassen das <image>, das als Maskenrahmen verwendet werden soll, und optional vier Randabstandswerte 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 Speicherort der Bildressource, die als Maskenbild verwendet werden soll,
<gradient>, oder ein anderes<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, der sich auf die entsprechende Dimension (Breite oder Höhe) des Rahmenkastens bezieht.
<number>-
Die Größe des Versatzes des Maskenbildes in Pixel.
repeat-
Das Maskenbild wird so oft wie nötig wiederholt, um den Rahmenkasten zu überspannen. Kann ein Teilbild beinhalten, wenn das Maskenbild sich nicht gleichmäßig in den Rahmenkasten teilt.
stretch-
Das Maskenbild wird gedehnt, um den Rahmenkasten genau zu enthalten.
round-
Das Maskenbild wird etwas gedehnt und wiederholt, so dass es am Ende des Rahmenkastens kein Teilmaskenbild gibt.
space-
Das Maskenbild wird so oft wie möglich ohne Dehnung wiederholt. Es gibt kein Teilmaskenbild am Ende des Rahmenkastens.
Die Vorsetzwerte 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.
Randwiederholungsstile werden, wenn sie enthalten sind, in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert deklariert ist, gilt dieser für beide Achsen. Während es background-repeat ähnelt, werden die Werte cover und contain nicht unterstützt.
Formale Definition
- Anfangswert:
none - Gilt für: alle Elemente
- Vererbt: nein
- Berechneter Wert: wie spezifiziert
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 auffüllen
.example-two {
-webkit-mask-box-image: url("logo.png") 100px 100px 0px 0px round round;
}
Spezifikationen
Gehört keinem Standard an.
Browser-Kompatibilität
Siehe auch
- CSS
mask-borderEigenschaft - CSS
border-imageEigenschaft - Safari CSS-Referenz:
-webkit-mask-box-image