mask-size

In CSS gibt die Eigenschaft mask-size die Größe eines Masken-Layer-Bildes an. In vielerlei Hinsicht funktioniert sie sehr ähnlich wie die Eigenschaft background-size.

.element {
  mask-image: url(star.svg);
  mask-size: 200px 100px;
}

Maskierung ermöglicht es Ihnen, ausgewählte Teile eines Elements anzuzeigen und den Rest auszublenden. Die Größe der Maske wird durch die Eigenschaft mask-size definiert.

In der folgenden Demo können Sie mit der Größe des Masken-Layer-Bildes experimentieren.

Syntax

mask-size: <bg-size> = [ <length-percentage> = <length> | <percentage> | auto ]{1,2} | cover | contain

• Anfangswert: auto
• Gilt für: Alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements <defs>, aller Grafikelemente und des Elements <use>.
• Vererbt: nein
• Animationstyp: wiederholbare Liste

Das bedeutet im Grunde, dass die Syntax einen Hintergrundgrößenwert (<bg-size>) akzeptiert, der entweder eine oder zwei Längen und/oder Prozentsätze (<length-percentage>) sein kann, auf auto gesetzt ist oder eine von zwei Schlüsselwörtern ist (cover und contain).

• Wenn zwei Werte verwendet werden, gibt der erste Wert die Breite des Maskenbildes an und der zweite Wert seine Höhe.
• Wenn ein Wert verwendet wird, der nicht contain oder cover ist, definiert er die Breite des Maskenbildes und die Höhe wird als auto angenommen.

Werte

/* Lengths */
mask-size: 200px; /* width is 200px and height is auto */
mask-size: 50% 100%; /* width is 50% and height is 100% */


/* Keywords */
mask-size: contain;
mask-size: cover;


/* Global values */
mask-size: auto;
mask-size: intial;
mask-size: inherit;
mask-size: unset;

Wertdefinitionen

• <length>: Jede gültige und nicht negative CSS-Länge, wie z. B. px, em, rem und %.
• <percentage>: Gibt die Größe des Masken-Layer-Bildes als Prozentwert relativ zum Masken-Positionierungsbereich an, der durch den Wert von mask-origin festgelegt wird. Standardmäßig ist dieser Wert border-box, was bedeutet, dass er Ränder, Padding und Inhalt der Box enthält.
• auto: Die intrinsische Höhe und Breite des Maskenbildes wird verwendet, und für Bilder wie Verläufe, die keine intrinsischen Abmessungen haben, wird es in der Größe des Masken-Positionierungsbereichs gerendert.
• contain: Skaliert das Maskenbild unter Beibehaltung seines intrinsischen Verhältnisses, so dass sowohl seine Breite als auch seine Höhe in den Masken-Positionierungsbereich passen. Bei Bildern wie Verläufen, die keine intrinsischen Abmessungen haben, wird es in der Größe des Masken-Positionierungsbereichs gerendert.
• cover: Skaliert das Maskenbild unter Beibehaltung seines intrinsischen Verhältnisses, so dass sowohl seine Breite als auch seine Höhe den Masken-Positionierungsbereich vollständig abdecken können. Bei Bildern wie Verläufen, die keine intrinsischen Abmessungen haben, wird es in der Größe des Masken-Positionierungsbereichs gerendert.
• initial: Wendet die Standardeinstellung der Eigenschaft an, die auto ist.
• inherit: Übernimmt den Wert von mask-size des übergeordneten Elements.
• unset: Entfernt mask-size vom Element.

Verwendung mehrerer Werte

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskengrößen annehmen, und jeder Wert wird auf ein entsprechendes Masken-Layer-Bild angewendet, das in der Eigenschaft mask-image angegeben ist.

Im folgenden Beispiel gibt der erste Wert die Größe des ersten Bildes an, der zweite Wert die Größe des zweiten Bildes und so weiter.

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-size: 100px 100%, auto, contain;
}

Der Wert auto

Wenn der Wert der Eigenschaft mask-size als auto angegeben wird, wie hier

.element {
  mask-size: auto auto;
  /* or */
  mask-size: auto;
}

…dann skaliert das Maskenbild in den entsprechenden Richtungen, um sein Seitenverhältnis beizubehalten. Das heißt, wir können je nach intrinsischen Abmessungen und Proportion des Bildes verschiedene Ergebnisse erzielen.

Proportion/Dimension	Keine intrinsischen Abmessungen	Eine intrinsische Dimension	Beide intrinsischen Abmessungen
Hat Proportion	Wird gerendert, als ob contain angegeben worden wäre	Wird in der Größe gerendert, die durch diese eine Dimension und die Proportion bestimmt wird	Wird in dieser Größe gerendert
Keine Proportion	Wird in der Größe des Masken-Positionierungsbereichs gerendert	Wird mit der intrinsischen Abmessung und der entsprechenden Abmessung des Masken-Positionierungsbereichs gerendert	N/A

Wenn der Wert von mask-size mit auto und einem anderen nicht-auto-Wert angegeben wird, wie im Folgenden

.element {
  mask-size: auto 200px;
}

…dann

• wenn das Bild eine intrinsische Proportion hat, wird der auto-Wert unter Verwendung der angegebenen Abmessung und der intrinsischen Proportion berechnet.
• wenn das Bild keine intrinsische Proportion hat, wird der auto-Wert zur entsprechenden intrinsischen Abmessung des Bildes, falls vorhanden, und, falls nicht, wird auto zur entsprechenden Abmessung des Masken-Positionierungsbereichs.

Verständnis von cover und contain

Das folgende Video erklärt, wie die Schlüsselwörter contain und cover funktionieren. Beachten Sie, dass die anfängliche Position eines Masken-Layers in der Mitte des Positionierungsbereichs liegt.

Wenn das Bild kein intrinsisches Seitenverhältnis hat, rendert die Angabe von cover oder contain das Maskenbild in der Größe des Masken-Positionierungsbereichs.

Und was genau sind intrinsische Abmessungen und intrinsisches Verhältnis?

Intrinsische Abmessungen sind Breite und Höhe eines Elements und intrinsisches Verhältnis ist das Verhältnis von ihnen.

• Ein Bitmap-Bild wie ein PNG-Format hat immer intrinsische Abmessungen und ein intrinsisches Verhältnis.
• Ein Vektorgrafik wie ein SVG-Format kann beide intrinsischen Abmessungen haben. Daher hat es auch ein intrinsisches Verhältnis. Es kann auch eine oder keine intrinsische Abmessung haben und in jedem Fall kann es ein intrinsisches Verhältnis haben oder nicht.
• Verläufe sind wie Bilder ohne intrinsische Abmessungen oder intrinsisches Verhältnis.

Demo

Die folgende Demo verwendet eine Länge für mask-size. Versuchen Sie, den Wert in Ihrem Code auf andere Arten von Werten zu ändern und überprüfen Sie das Ergebnis.

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	18+	53+	Alle	4+	70

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	4.4+	Alle	Alle

Weitere Informationen

Verwandte Eigenschaften