Diemask-sizeCSS Eigenschaft gibt die Größen der angegebenen Maskenbilder an. Maskenbildgrößen können vollständig oder teilweise eingeschränkt werden, um ihreintrinsischen Seitenverhältnisse zu bewahren.

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

Diemask-size Eigenschaft akzeptiert eine durch Kommas getrennte Liste von<bg-size> Werten. Ein<bg-size> Wert ist entwedercover,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 aufauto 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 Eigenschaftmask-repeat ist aufno-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 skaliertauto 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 Eigenschaftmask-origin definiert, die standardmäßigpadding-box ist. Negative Werte sind nicht erlaubt.

Beschreibung

Diemask-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 dermask-image Eigenschaftsangabe bestimmt (ein Wert erstellt eine Maskenschicht, auch wenn esnone ist).

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

• Wennmask-size mehr Werte alsmask-image hat, werden die überschüssigen Werte vonmask-size nicht verwendet.
• Wennmask-size weniger Werte alsmask-image hat, werden diemask-size Werte wiederholt.

Jedermask-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üsselwortauto, oder eine Länge, ein Prozentsatz oderauto:

• Die verfügbaren Schlüsselwörter sindcover undcontain.
• 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 aufauto gesetzt ist.

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

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

• Wenn beide Komponenten vonmask-size spezifiziert und nichtauto sind, wird das Maskenbild in der angegebenen Größe gerendert.
• Wenn diemask-sizecontain odercover 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 diemask-sizeauto ist (was zuauto 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 seineintrinsische Größe. Hat es keine intrinsischen Dimensionen und keine intrinsische Proportion, wie es beiCSS Verläufen der Fall ist, wird es in der Größe des Maskenpositionierungsbereichs gerendert, der durch die Eigenschaftmask-origin definiert wird (standardmäßigborder-box). Hat die Maskenquelle keine Dimensionen, aber eine Proportion (Seitenverhältnis), wird ein Wert vonauto so gerendert, als obcontain 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.
• Hatmask-size eineauto 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 derauto Wert die Dimension des Maskenpositionierungsbereichs hat.

Wie bei allen Langhandkomponenten einer Kurzschreibweiseigenschaft, wenn diemask Kurzschreibweiseigenschaft gesetzt ist und der Wert dermask-size Eigenschaft in keiner Maskenschicht definiert ist, wird dermask-size Wert für diese Maskenschichten auf seinen Anfangswertauto 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ürmask-size.

HTML

Wir fügen zwei<div> Elemente ein:

<div></div><div></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("/shared-assets/images/examples/mdn.svg");}

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

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

Im Fallwidth wird die Maske mit100px Breite gerendert (50% des200px breiten Elements). Die Höhe wird standardmäßig aufauto gesetzt und behält das Seitenverhältnis der Maske bei. Im Fallheight wird die Maske mit200px Höhe gerendert (50% des400px hohen Containers). Die Breite wird explizit aufauto 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ürmask-size.

HTML

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

<section>  <div></div></section><section>  <div></div></section><section>  <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("/shared-assets/images/examples/mask-star.svg");}

Diemask-size von zwei der<div> Elemente ist auf einen der Schlüsselwortwerte der Eigenschaft gesetzt. Das dritte<div> hat einemask-size vonauto 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 vongeneriertem 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

Mitauto wird der Stern in seiner intrinsischen100px x100px Größe angezeigt. Mitcover wächst der Stern auf400px Höhe, um den gesamten Ursprungsbereich zu bedecken. Mitcontain wächst der Stern, bis eine Dimension die gleiche Dimension derUrsprungsbox 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>  <div></div></section><section>  <div></div></section><section>  <div></div></section>

div {  background: blue linear-gradient(red, blue);  mask-image: url("/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;}

Dercontain Wert enthält die Maske innerhalb der Ursprungsbox. Dercover Wert deckt sie ab. In beiden Fällen schrumpft die Maske, während das ursprüngliche Seitenverhältnis beibehalten wird. Mitauto 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
• CSSmask Eigenschaften
• Mehrere Masken deklarieren
• CSS-Maskierung Modul