-webkit-mask-box-image

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die nicht standardisierte, mit Präfix versehene -webkit-mask-box-image Kurzschreibweise legt das Maskenbild für die Randbox eines Elements fest.

Hinweis: Diese Eigenschaft ist nicht standardisiert und befindet sich auf keinem Standardisierungspfad. Ziehen Sie in Betracht, stattdessen die Eigenschaft mask-border zu verwenden.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Die Werte umfassen das <image>, das als Maskenrand verwendet werden soll, sowie optional vier Rand-Abstandswerte und bis zu zwei Wiederholungsstile für den Rand.

Syntax

css
/* 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

Gibt an, dass die Randbox 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 Prozentsatzwert relativ zur entsprechenden Dimension (Breite oder Höhe) der Randbox.

<number>

Die Größe des Versatzes des Maskenbildes in Pixeln.

repeat

Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um die Randbox zu füllen. Ein teilweise abgeschnittenes Bild kann enthalten sein, wenn das Maskenbild nicht gleichmäßig in die Randbox passt.

stretch

Das Maskenbild wird gestreckt, um die Randbox genau zu füllen.

round

Das Maskenbild wird etwas gestreckt und wiederholt, sodass kein teilweise abgeschnittenes Maskenbild am Ende der Randbox verbleibt.

space

Das Maskenbild wird so oft wie möglich ohne Stretching wiederholt. Es gibt kein teilweise abgeschnittenes Maskenbild am Ende der Randbox.

Die Werte für den Abstand, oder die Kanten-Versä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> angegeben werden, wobei Zahlen als Pixelwerte interpretiert werden.

Wenn Wiederholungsstile des Randes angegeben sind, werden diese in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert angegeben wurde, gilt dieser für beide Achsen. Während sie background-repeat ähneln, werden die Werte cover und contain nicht unterstützt.

Formale Definition

Formale Syntax

-webkit-mask-box-image: <mask-image-source> [<mask-image-offset>{4} <mask-border-repeat>{1,2} ]

Where:

<mask-image-source> = <url> | <gradient> | none

<mask-image-offset> = <length> | <percentage> | <number>

<repeat-style> = repeat | stretch | round | space

Beispiele

Festlegen eines Bildes

css
.example-one {
  -webkit-mask-box-image: url("mask.png");
}

Versetzen und Füllen eines Bildes

css
.example-two {
  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-mask-box-image
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.

Siehe auch