-webkit-mask-box-image

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die nicht-standardisierte, mit Präfix versehene -webkit-mask-box-image Kurzform Eigenschaft legt das Maskenbild für den Rahmenbereich eines Elements fest.

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

Zusammengehörige Eigenschaften

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

Die Werte beinhalten das <image>, das als Maskenrand genutzt werden soll, und optional vier Werte für den Randabstand sowie bis zu zwei Stile für das Wiederholen des Randes.

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 ein Rahmenbereich 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 Prozentwert relativ zur entsprechenden Dimension des Rahmenbereichs (Breite oder Höhe).
<number>: Die Größe des Versatzes des Maskenbildes in Pixeln.
repeat: Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um den Rahmenbereich zu überspannen. Ein teilweise Bild kann enthalten sein, wenn das Maskenbild sich nicht gleichmäßig in den Rahmenbereich aufteilt.
stretch: Das Maskenbild wird gestreckt, um den Rahmenbereich genau zu umschließen.
round: Das Maskenbild wird leicht gestreckt und wiederholt, so dass es kein teilweises Maskenbild am Ende des Rahmenbereichs gibt.
space: Das Maskenbild wird so oft wie möglich ohne Streckung wiederholt. Es gibt kein teilweises Maskenbild am Ende des Rahmenbereichs.

Die Offset-Werte 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> gesetzt werden, wobei Zahlen als Pixelgrößen interpretiert werden.

Rand-Wiederholungsstile, wenn sie enthalten sind, werden in der Reihenfolge <repeat-x> <repeat-y> interpretiert. Wenn nur ein Wert angegeben wird, gilt dieser für beide Achsen. Während ähnlich wie background-repeat, werden die Werte cover und contain nicht unterstützt.

Formale Definition

Anfangswert: none
Gilt für: alle Elemente
Vererbt: nein
Berechneter Wert: wie angegeben

Formale Syntax

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

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") 100px 100px 0px 0px round round;
}

CSS mask-border Eigenschaft
CSS border-image Eigenschaft
Safari CSS-Referenz: -webkit-mask-box-image

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden