-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, vorangestellte Eigenschaft -webkit-mask-box-image Shorthand legt das Maskenbild für den Randbereich eines Elements fest.

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

Zusammengehörige Eigenschaften

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

Die Werte umfassen das <image>, das als Maskenrahmen verwendet werden soll, und optional vier Maskenabstände und bis zu zwei Maskenwiederholungsstile.

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

Wird verwendet, um anzugeben, dass ein Randbereich keine Maskenfelder 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 Rahmenbereichs.

<number>

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

repeat

Das Maskenbild wird so oft wie nötig wiederholt, um den Rahmenbereich zu überspannen. Kann ein Teilbild enthalten, wenn das Maskenbild nicht gleichmäßig in den Rahmenbereich passt.

stretch

Das Maskenbild wird gestreckt, um den Rahmenbereich genau zu enthalten.

round

Das Maskenbild wird etwas gestreckt und wiederholt, sodass es am Ende des Rahmenbereichs kein Teilmaskenbild gibt.

space

Das Maskenbild wird so oft wie möglich ohne Strecken wiederholt. Es gibt kein Teilmaskenbild am Ende des Rahmenbereichs.

Die Voraussetzungswerte oder Randabstä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.

Wiederholungsstile von Rändern, wenn sie eingeschlossen sind, werden in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert angegeben ist, gilt er für beide Achsen. Im Gegensatz zu background-repeat 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

BCD tables only load in the browser

Siehe auch