-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
Kurzschreibweise legt das Maskenbild für die Randbox eines Elements fest.
Hinweis:
Diese Eigenschaft ist nicht standardisiert und befindet sich auf keinem Standardisierungspfad. Ziehen Sie in Betracht, stattdessen die Eigenschaft mask-border
zu verwenden.
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Die Werte umfassen das <image>
, das als Maskenrand verwendet werden soll, sowie optional vier Rand-Abstandswerte und bis zu zwei Wiederholungsstile für den Rand.
Syntax
/* 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
-
Gibt an, dass die Randbox 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 Prozentsatzwert relativ zur entsprechenden Dimension (Breite oder Höhe) der Randbox.
<number>
-
Die Größe des Versatzes des Maskenbildes in Pixeln.
repeat
-
Das Maskenbild wird so oft wiederholt, wie es notwendig ist, um die Randbox zu füllen. Ein teilweise abgeschnittenes Bild kann enthalten sein, wenn das Maskenbild nicht gleichmäßig in die Randbox passt.
stretch
-
Das Maskenbild wird gestreckt, um die Randbox genau zu füllen.
round
-
Das Maskenbild wird etwas gestreckt und wiederholt, sodass kein teilweise abgeschnittenes Maskenbild am Ende der Randbox verbleibt.
space
-
Das Maskenbild wird so oft wie möglich ohne Stretching wiederholt. Es gibt kein teilweise abgeschnittenes Maskenbild am Ende der Randbox.
Die Werte für den Abstand, oder die Kanten-Versätze, 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>
angegeben werden, wobei Zahlen als Pixelwerte interpretiert werden.
Wenn Wiederholungsstile des Randes angegeben sind, werden diese in der Reihenfolge <repeat-x> <repeat-y>
interpretiert. Wenn nur ein Wert angegeben wurde, gilt dieser für beide Achsen. Während sie background-repeat
ähneln, werden die Werte cover
und contain
nicht unterstützt.
Formale Definition
- Initialwert:
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} ]
Where:
<mask-image-source> = <url>
| <gradient> | none
<mask-image-offset> = <length> | <percentage> | <number>
<repeat-style> = repeat | stretch | round | space
Beispiele
Festlegen eines Bildes
.example-one {
-webkit-mask-box-image: url("mask.png");
}
Versetzen und Füllen eines Bildes
.example-two {
-webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
-webkit-mask-box-image |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.
Siehe auch
- CSS
mask-border
-Eigenschaft - CSS
border-image
-Eigenschaft - Safari CSS-Referenz:
-webkit-mask-box-image