-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 einem Präfix versehene -webkit-mask-box-image Shorthand-Eigenschaft legt das Maskenbild für die Rahmenbox eines Elements fest.

Hinweis: Diese Eigenschaft ist nicht standardisiert und befindet sich in keiner Standardspur. Ziehen Sie stattdessen die Verwendung der mask-border-Eigenschaft in Betracht.

Zusammengesetzte Eigenschaften

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

Die Werte umfassen das <image>, das als Maskenrand verwendet werden soll, und optional vier Werte für die Rahmenabstände sowie bis zu zwei Wiederholungsstile des Rahmens.

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 Ort der Bildressource, die als Maskenbild verwendet werden soll, <gradient> oder ein anderer <image>-Wert.

none

Wird verwendet, um anzugeben, dass eine Rahmenbox kein Maskenbild haben soll.

<length>

Die Größe des Versatzes des Maskenbildes. Sehen Sie <length> für mögliche Einheiten.

<percentage>

Der Versatz des Maskenbildes hat einen Prozentwert relativ zu den entsprechenden Dimensionen der Rahmenbox (Breite oder Höhe).

<number>

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

repeat

Das Maskenbild wird so oft wiederholt, wie es erforderlich ist, um die Rahmenbox abzudecken. Kann ein unvollständiges Bild enthalten, wenn das Maskenbild sich nicht gleichmäßig auf die Rahmenbox aufteilt.

stretch

Das Maskenbild wird so gestreckt, dass es die Rahmenbox exakt enthält.

round

Das Maskenbild wird etwas gestreckt und wiederholt, sodass am Ende der Rahmenbox kein unvollständiges Maskenbild vorhanden ist.

space

Das Maskenbild wird so oft wie möglich ohne Streckung wiederholt. Am Ende der Rahmenbox gibt es kein unvollständiges Maskenbild.

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 Pixellängen interpretiert werden.

Rahmenwiederholungsstile, falls angegeben, werden in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert angegeben ist, gilt derselbe Wert für beide Achsen. Obwohl diese Funktion ähnlich wie background-repeat ist, 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

Ein Bild festlegen

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

Ein Bild versetzen und füllen

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

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch