mask-size

Syntax

/* Keyword syntax */
mask-size: cover;
mask-size: contain;
mask-size: auto;

/* One-value syntax */
/* Mask width. Sets height to 'auto'. */
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;

/* Two-value syntax */
/* First value: mask width. Second value: mask height */
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto 50%;

/* Multiple values */
mask-size: auto, contain;
mask-size:
  50%,
  50% 25%,
  auto 25%;
mask-size: 6px, auto, contain;

/* Global values */
mask-size: inherit;
mask-size: initial;
mask-size: revert;
mask-size: revert-layer;
mask-size: unset;

Werte

Die mask-size Eigenschaft akzeptiert eine durch Kommas getrennte Liste von <bg-size> Werten. Ein <bg-size> Wert ist entweder cover, contain, ein Paar von Werten, das die Breite und Höhe angibt (in dieser Reihenfolge), oder ein einzelner Wert, der die Breite angibt (in diesem Fall wird die Höhe auf auto gesetzt). Werte beinhalten:

contain

Skaliert das Maskenbild hoch oder runter, wobei das Seitenverhältnis beibehalten wird, sodass die Maske so groß wie möglich innerhalb ihres Containers ist, ohne sie zu beschneiden oder zu strecken. Wenn das Maskenbild kleiner als der Container ist, wird die Maske gekachelt oder wiederholt, es sei denn, die Eigenschaft mask-repeat ist auf no-repeat gesetzt.

cover

Skaliert das Maskenbild auf die kleinstmögliche Größe, um den Container auszufüllen, während das Seitenverhältnis beibehalten wird. Wenn das Seitenverhältnis des Maskenbildes vom Element abweicht, wird es vertikal oder horizontal beschnitten.

auto

Bewahrt das ursprüngliche Seitenverhältnis des Maskenquellbildes. Wenn sowohl die Breite als auch die Höhe eingestellt sind, wird die ursprüngliche Größe der Maskenressource verwendet. Andernfalls skaliert auto das Maskenbild in der entsprechenden Richtung, sodass das ursprüngliche Seitenverhältnis beibehalten wird.

<length>

Rendert das Maskenbild in der angegebenen Länge in der entsprechenden Dimension (Breite, wenn als erster oder einziger Wert gesetzt, Höhe, wenn als zweiter Wert gesetzt). Negative Werte sind nicht erlaubt.

<percentage>

Rendert das Maskenbild in der entsprechenden Dimension als Prozentsatz des Ursprungsbereichs der Box, wie durch die Eigenschaft mask-origin definiert, die standardmäßig padding-box ist. Negative Werte sind nicht erlaubt.

Beschreibung

Die mask-size Eigenschaft wird verwendet, um Maskenschichten zu skalieren.

Ein Element kann mehrere Maskenschichten haben. Die Anzahl der Maskenschichten wird durch die Anzahl der kommagetrennten Werte in der mask-image Eigenschaftsangabe bestimmt (ein Wert erstellt eine Maskenschicht, auch wenn es none ist).

Jeder mask-size Wert in der Liste der kommagetrennten Werte wird einer zugehörigen Maskenschicht zugeordnet, wie durch die Liste der mask-image Werte definiert, in der angegebenen Reihenfolge. Wenn die Anzahl der Werte in den beiden Eigenschaften unterschiedlich ist:

• Wenn mask-size mehr Werte als mask-image hat, werden die überschüssigen Werte von mask-size nicht verwendet.
• Wenn mask-size weniger Werte als mask-image hat, werden die mask-size Werte wiederholt.

Jeder mask-size Wert ist ein <bg-size> Wert. Es gibt drei Möglichkeiten, jedes <bg-size> zu deklarieren: ein Schlüsselwort, zwei Längen, Prozentsätze oder das Schlüsselwort auto, oder eine Länge, ein Prozentsatz oder auto:

• Die verfügbaren Schlüsselwörter sind cover und contain.
• Wenn zwei Werte angegeben sind, definiert der erste die Maskenbreite und der zweite ihre Höhe.
• Wenn ein Wert angegeben ist, definiert er nur die Maskenbreite, wobei die Höhe auf auto gesetzt ist.

Die Breiten- und Höhenwerte sind ein <length>, ein <percentage>, oder das Schlüsselwort auto, welches der Standard ist. Setzt man einen oder beide Werte auf auto, wird das ursprüngliche Seitenverhältnis des Maskenbildes beibehalten.

Die gerenderte Größe des Maskenbildes wird wie folgt berechnet:

• Wenn beide Komponenten von mask-size spezifiziert und nicht auto sind, wird das Maskenbild in der angegebenen Größe gerendert.
• Wenn die mask-size contain oder cover ist, wird das Bild unter Beibehaltung seines Seitenverhältnisses in der größten Größe gerendert, die im Maskenpositionierungsbereich enthalten ist oder diesen abdeckt. Hat das Bild keine intrinsische Proportion, wie bei Verläufen, wird es in der Größe des Maskenpositionierungsbereichs gerendert.
• Wenn die mask-size auto ist (was zu auto auto aufgelöst wird), wird es in der Größe gerendert, in der die Maske angezeigt würde, wenn kein CSS angewendet wäre, um die Darstellung zu ändern; dies ist seine intrinsische Größe. Hat es keine intrinsischen Dimensionen und keine intrinsische Proportion, wie es bei CSS Verläufen der Fall ist, wird es in der Größe des Maskenpositionierungsbereichs gerendert, der durch die Eigenschaft mask-origin definiert wird (standardmäßig border-box). Hat die Maskenquelle keine Dimensionen, aber eine Proportion (Seitenverhältnis), wird ein Wert von auto so gerendert, als ob contain spezifiziert worden wäre. Hat das Bild eine intrinsische Dimension und eine Proportion, wird es in der durch diese Dimension und die Proportion bestimmten Größe gerendert. Hat ein Bild eine intrinsische Dimension, aber keine Proportion, wird es in der intrinsischen Dimension und der entsprechenden Dimension des Maskenpositionierungsbereichs gerendert.
• Hat mask-size eine auto Komponente und eine nicht-auto Komponente, welche auf alle Einzelwertwerte zutrifft, bleibt das Seitenverhältnis erhalten, wenn die Maskenquelle eine intrinsische Proportion aufweist. Wenn keine intrinsische Proportion vorhanden ist, wird davon ausgegangen, dass der auto Wert die Dimension des Maskenpositionierungsbereichs hat.

Wie bei allen Langhandkomponenten einer Kurzschreibweiseigenschaft, wenn die mask Kurzschreibweiseigenschaft gesetzt ist und der Wert der mask-size Eigenschaft in keiner Maskenschicht definiert ist, wird der mask-size Wert für diese Maskenschichten auf seinen Anfangswert auto zurückgesetzt.

Formale Definition

Formale Syntax

mask-size = 
  <bg-size>#  

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

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Die Maskengröße als Prozentsatz festlegen

Dieses Beispiel zeigt die Grundverwendung und auch die Prozentwerte für mask-size.

HTML

Wir fügen zwei <div> Elemente ein:

<div class="width"></div>
<div class="height"></div>

CSS

Die <div> Elemente sind definiert, um doppelt so hoch wie breit zu sein, mit einem Farbverlaufshintergrund und einer Maske:

div {
  width: 200px;
  height: 400px;
  background: blue linear-gradient(red, blue);
  mask-image: url("/https/developer.mozilla.org/shared-assets/images/examples/mdn.svg");
}

Die Breite eines <div> Elements Maske wird auf 50% eingestellt, bei dem die Höhe standardmäßig auf auto gesetzt ist. Die Höhe der Maske für das zweite <div> Element ist auf 50% gesetzt, wobei die Breite auf auto gesetzt ist:

.width {
  mask-size: 50%;
}

.height {
  mask-size: auto 50%;
}

Im Fall width wird die Maske mit 100px Breite gerendert (50% des 200px breiten Elements). Die Höhe wird standardmäßig auf auto gesetzt und behält das Seitenverhältnis der Maske bei. Im Fall height wird die Maske mit 200px Höhe gerendert (50% des 400px hohen Containers). Die Breite wird explizit auf auto gesetzt und behält das Seitenverhältnis der Maske bei.

body {
  display: flex;
  gap: 20px;
}

Ergebnisse

Cover und contain

Dieses Beispiel zeigt die Schlüsselwortwerte für mask-size.

HTML

Drei <section> Elemente sind definiert, jedes mit einem anderen Klassennamen und jedes enthält ein <div>.

<section class="auto">
  <div></div>
</section>
<section class="cover">
  <div></div>
</section>
<section class="contain">
  <div></div>
</section>

CSS

Die <div> Elemente sind definiert, um doppelt so hoch wie breit zu sein, mit einem Farbverlaufshintergrund und einer Maske:

div {
  width: 200px;
  height: 400px;
  background: blue linear-gradient(red, blue);
  mask-image: url("/https/developer.mozilla.org/shared-assets/images/examples/mask-star.svg");
}

Die mask-size von zwei der <div> Elemente ist auf einen der Schlüsselwortwerte der Eigenschaft gesetzt. Das dritte <div> hat eine mask-size von auto gesetzt, was die ursprünglichen intrinsischen Dimensionen der Maske demonstriert:

.auto div {
  mask-size: auto;
}

.cover div {
  mask-size: cover;
}

.contain div {
  mask-size: contain;
}

Die Eigenschaftswerte werden mithilfe von generiertem Inhalt angezeigt.

section::before {
  content: "mask-size: " attr(class) ";";
  display: block;
  text-align: center;
  border-bottom: 1px solid;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
section {
  border: 1px solid;
}

Ergebnisse

Mit auto wird der Stern in seiner intrinsischen 100px x 100px Größe angezeigt. Mit cover wächst der Stern auf 400px Höhe, um den gesamten Ursprungsbereich zu bedecken. Mit contain wächst der Stern, bis eine Dimension die gleiche Dimension der Ursprungsbox erreicht, was bedeutet, dass der Stern so groß wie möglich ist (200px breit), aber immer noch darin enthalten ist.

Wenn die Maske größer als der Container ist

Unter Verwendung des gleichen HTML und CSS wie oben, mit nur einer anderen Ursprungsboxgröße, erforscht dieses Beispiel, was passiert, wenn die Ursprungsbox kleiner als die intrinsischen Dimensionen der Maske ist.

<section class="auto">
  <div></div>
</section>
<section class="cover">
  <div></div>
</section>
<section class="contain">
  <div></div>
</section>

div {
  background: blue linear-gradient(red, blue);
  mask-image: url("/https/developer.mozilla.org/shared-assets/images/examples/mask-star.svg");
}

.auto div {
  mask-size: auto;
}

.cover div {
  mask-size: cover;
}

.contain div {
  mask-size: contain;
}

section::before {
  content: attr(class);
  display: block;
  text-align: center;
  border-bottom: 1px solid;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
section {
  border: 1px solid;
}

Der einzige Unterschied ist die Größe der umschließenden Box (und der generierte Inhalt):

div {
  width: 70px;
  height: 70px;
}

Der contain Wert enthält die Maske innerhalb der Ursprungsbox. Der cover Wert deckt sie ab. In beiden Fällen schrumpft die Maske, während das ursprüngliche Seitenverhältnis beibehalten wird. Mit auto wird die Maske abgeschnitten, weil die intrinsischen Dimensionen größer als die Boxmaße sind.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• background-size
• mask Kurzschreibweise
• mask-image
• mask-origin
• mask-position
• mask-repeat
• mask-image
• mask-border
• background-size
• mask-border-width
• Einführung in CSS Maskierung
• CSS mask Eigenschaften
• Mehrere Masken deklarieren
• CSS-Maskierung Modul