-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 Kurzschrift-Eigenschaft legt das Maskenbild für das Rahmenfeld eines Elements fest.

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

Bestandteilseigenschaften

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 Rahmenabstandswerte und bis zu zwei Rahmenwiederholungsstile.

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 Rahmenfeld kein Maskenbild haben soll.

<length>

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

<percentage>

Der Versatz des Maskenbildes hat einen Prozentwert im Verhältnis zur entsprechenden Dimension (Breite oder Höhe) des Rahmenfeldes.

<number>

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

repeat

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

stretch

Das Maskenbild wird so gedehnt, dass es das Rahmenfeld genau enthält.

round

Das Maskenbild wird etwas gedehnt und wiederholt, sodass am Ende des Rahmenfeldes kein partielles Maskenbild vorhanden ist.

space

Das Maskenbild wird so oft wie möglich ohne Dehnung wiederholt. Es gibt kein partielles Maskenbild am Ende des Rahmenfeldes.

Die Abstands- oder Kantenversatzwerte 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, wenn sie einbezogen werden, werden in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert angegeben ist, gilt der Wert für beide Achsen. Während sie den 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} ]

Beispiele

Ein Bild einstellen

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

Versatz und Füllung eines Bildes

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

Spezifikationen

Teil keiner Norm.

Browser-Kompatibilität

Siehe auch