-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 standardmäßige, vorangestellte -webkit-mask-box-image Kurzform-Eigenschaft legt das Maskenbild für die Umrandungsbox eines Elements fest.

Hinweis: Diese Eigenschaft ist nicht standardisiert und befindet sich nicht auf einem Standardisierungspfad. Erwägen Sie stattdessen die Verwendung der Eigenschaft mask-border.

Zuordnende Eigenschaften

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

Die Werte schließen das <image> ein, das als Maskenrand verwendet werden soll, und optional vier Randabstandswerte sowie bis zu zwei Randwiederholungsstile.

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 anderer <image>-Wert.

none

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

<length>

Die Größe der Offset-Maskenbildgröße. Siehe <length> für mögliche Einheiten.

<percentage>

Der Offset des Maskenbilds hat einen Prozentwert relativ zur entsprechenden Dimension (Breite oder Höhe) der Umrandungsbox.

<number>

Die Größe des Offsets des Maskenbilds in Pixel.

repeat

Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um die Umrandungsbox zu überspannen. Es kann ein Teilbild enthalten sein, falls das Maskenbild sich nicht gleichmäßig in die Umrandungsbox teilen lässt.

stretch

Das Maskenbild wird gestreckt, um die Umrandungsbox genau zu enthalten.

round

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

space

Das Maskenbild wird so oft wie möglich wiederholt, ohne gestreckt zu werden. Es gibt kein Teilmaskenbild am Ende der Umrandungsbox.

Die Abstands- oder Kantenoffsets definieren die Distanzen 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 eingeschlossen, werden in der Reihenfolge von <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert deklariert ist, ist der Wert für beide Achsen der gleiche. Ähnlich wie background-repeat, werden die cover und contain Werte 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 einstellen

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

Ein Bild absetzen 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

Siehe auch