CSS mask-size Eigenschaft

Definition und Verwendung

mask-size Diese Eigenschaft legt die Größe des Maskierungsimages fest.

Legen Sie die Größe des Maskierungsimages (in Prozent) fest:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Legen Sie die Größe des Maskierungsimages (in Pixel) fest:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

mask-size: auto|size|contain|cover|initial|inherit;

Wert	Beschreibung
auto	Standardwert.
size	Geben Sie die Größe des Maskierungsimages an, Sie können px, em und andere Einheiten verwenden oder %.
contain	Skalieren Sie das Maskierungsimage, damit seine Breite und Höhe dem Innern des Containers angepasst werden können.
cover	Skalieren Sie das Maskierungsimage, damit seine Breite und Höhe den Container überdecken können.
initial	Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe: initial.
inherit	Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Standardwert:	auto
Vererbbarkeit:	Nein
Animationserstellung:	Nicht unterstützt. Bitte lesen Sie:Animationsspezifische Eigenschaften.
Version:	CSS Masking Modul Level 1
JavaScript-Syntax:	object.style.maskSize="100px 200px"

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome	Edge	Firefox	Safari	Oper
120	120	53	15.4	106