Maskengröße - CSS-Tricks

Anonim

In CSS gibt die Eigenschaft Maskengröße die Größe eines Maskenebenenbilds an. In vielerlei Hinsicht funktioniert es sehr ähnlich wie die background-sizeEigenschaft.

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

Mit der Maskierung können Sie ausgewählte Teile eines Elements anzeigen, während der Rest ausgeblendet wird. Die Größe der Maske wird durch die mask-sizeEigenschaft definiert .

In der folgenden Demo können Sie mit der Größe des Maskenebenenbilds herumspielen:

Syntax

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Anfangswert: auto
  • Gilt für: Alle Elemente. In SVG gilt dies für Containerelemente mit Ausnahme des Elements, aller Grafikelemente und des Elements
  • Geerbt: nein
  • Animationstyp: Wiederholbare Liste

Das bedeutet im Grunde, dass die Syntax einen Wert für die Hintergrundgröße ( ) akzeptiert , der entweder eine oder zwei Längen und / oder Prozentsätze ( ) sein kann, auf autooder eines von zwei Schlüsselwörtern ( coverund contain).

  • Wenn zwei Werte verwendet werden, gibt der erste Wert die Breite des Maskenbilds und der zweite Wert seine Höhe an .
  • Wenn ein Wert verwendet wird, der nicht enthält oder abdeckt, definiert er die Breite des Maskenbilds und die Höhe wird angenommen auto.

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;

Wertedefinitionen

  • : Gültig und nicht negative CSS Länge, wie Jeder px, em, remund %unter anderem.
  • : Gibt die Größe des Maskenebenenbilds als Prozentwert relativ zum Maskenpositionierungsbereich an, der durch den Wert von festgelegt wird mask-origin. Standardmäßig ist dieser Wert border-box, was bedeutet, dass er Rahmen, Auffüllungen und Inhalt der Box enthält.
  • auto: Die Eigenhöhe und -breite des Maskenbilds wird verwendet und für Bilder wie Farbverläufe ohne Eigenabmessungen in der Größe des Maskenpositionierungsbereichs gerendert.
  • contain: Skaliert das Maskenbild unter Beibehaltung seines intrinsischen Anteils so, dass sowohl seine Breite als auch seine Höhe in den Maskenpositionierungsbereich passen. Für Bilder wie Farbverläufe, die keine intrinsischen Abmessungen haben, wird sie in der Größe des Maskenpositionierungsbereichs gerendert.
  • cover: Skaliert das Maskenbild unter Beibehaltung seines intrinsischen Anteils so, dass sowohl seine Breite als auch seine Höhe den Maskenpositionierungsbereich vollständig abdecken können. Für Bilder wie Farbverläufe, die keine intrinsischen Abmessungen haben, wird sie in der Größe des Maskenpositionierungsbereichs gerendert.
  • initial: Wendet die Standardeinstellung der Eigenschaft an auto.
  • inherit: Übernimmt den Maskengrößenwert des übergeordneten Elements.
  • unset: Entfernt den Strom mask-sizeaus dem Element.

Mehrere Werte verwenden

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskengrößen annehmen, und jeder Wert wird auf ein entsprechendes Maskenebenenbild angewendet, das in der mask-imageEigenschaft 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 usw.

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

Der autoWert

Wenn der Wert der mask-sizeEigenschaft wie folgt angegeben autowird:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Dann skaliert das Maskenbild in die entsprechenden Richtungen, um sein Seitenverhältnis beizubehalten. Das heißt, wir können abhängig von den intrinsischen Abmessungen und Proportionen des Bildes verschiedene Ergebnisse erzielen.

Anteil / Abmessung Keine intrinsischen Dimensionen Eine intrinsische Dimension Beide intrinsischen Dimensionen
Hat Anteil Wird so gerendert, als wäre stattdessen enthalten Gerendert in der Größe, die durch diese eine Dimension und den Anteil bestimmt wird In dieser Größe gerendert
Kein Anteil Wird in der Größe des Maskenpositionierungsbereichs gerendert Gerendert unter Verwendung der intrinsischen Dimension und der entsprechenden Dimension des Maskenpositionierungsbereichs N / A

Wenn der Wert von mask-sizemit autound einem anderen nicht automatischen Wert wie dem folgenden angegeben wird:

.element ( mask-size: auto 200px; )

… dann:

  • Wenn das Bild einen intrinsischen Anteil hat , wird der automatische Wert unter Verwendung der angegebenen Dimension und des intrinsischen Anteils berechnet.
  • Wenn das Bild keinen intrinsischen Anteil hat , wird der Auto-Wert zur entsprechenden intrinsischen Dimension des Bildes, falls vorhanden, und wenn dies nicht der Fall ist, ist auto die entsprechende Dimension des Maskenpositionierungsbereichs.

Verständnis coverundcontain

Das folgende Video erklärt, wie die Schlüsselwörter enthalten und abdecken funktionieren. Beachten Sie, dass sich die Anfangsposition einer Maskenebene in der Mitte des Positionierungsbereichs befindet:

Wenn das Bild kein intrinsisches Seitenverhältnis hat, wird das Maskenbild durch Angabe von Deckung oder Enthalten in der Größe des Maskenpositionierungsbereichs gerendert.

Und was zum Teufel ist eine intrinsische Dimension und ein intrinsisches Verhältnis?

Die intrinsischen Abmessungen sind die Breite und Höhe eines Elements, und das intrinsische Verhältnis ist das Verhältnis davon.

  • Ein Bitmap-Bild wie ein PNG-Format hat immer intrinsische Dimensionen und einen intrinsischen Anteil.
  • Ein Vektorbild wie ein SVG-Format kann beide intrinsischen Dimensionen haben. Daher hat es auch einen intrinsischen Anteil. Es kann auch eine oder keine intrinsischen Dimensionen haben und in jedem Fall kann es einen intrinsischen Anteil haben oder nicht.
  • Farbverläufe sind wie Bilder ohne intrinsische Dimensionen oder intrinsische Proportionen.

Browser-Unterstützung

IE Kante Feuerfuchs Chrom Safari Oper
Nein 18+ 53+ Alle 4+ 70
Android Chrome Android Firefox Android Browser iOS Safari Opera Mini
85+ 79+ 4.4+ Alle Alle
Quelle: caniuse

Demo

In der folgenden Demo wird eine Länge für die Maskengröße verwendet. Versuchen Sie, den Wert in andere Wertetypen im Code zu ändern, und überprüfen Sie das Ergebnis.

Mehr Informationen

  • CSS-Maskierungsmodul Stufe 1
  • Ausschneiden und Maskieren in CSS
  • Clipping vs. Masking: Wann wird jeder verwendet?
  • # 185: Spielen mit CSS-Masken (Video)