Diemask-modeCSS Eigenschaft wird auf das Element gesetzt, das maskiert werden soll. Sie legt fest, ob die durchmask-image definierte Maske als Luminanz- oder Alphamaske behandelt wird.

Syntax

/* Keyword values */mask-mode: alpha;mask-mode: luminance;mask-mode: match-source;/* Multiple values */mask-mode: alpha, match-source;/* Global values */mask-mode: inherit;mask-mode: initial;mask-mode: revert;mask-mode: revert-layer;mask-mode: unset;

Werte

Diemask-mode Eigenschaft kann mehrere durch Kommata getrennte<masking-mode> Schlüsselwörter haben, darunter:

alpha

Gibt an, dass die Alpha (Transparenz) Werte des Maskenbildes verwendet werden sollen.

luminance

Gibt an, dass dieLuminanz (Helligkeit) Werte des Maskenbildes verwendet werden sollen.

match-source

Gibt an, dass der Maskentyp durch die Quelle bestimmt wird. Dies ist der Standardwert der Eigenschaft.

• Wenn diemask-image ein SVG<mask> referenziert, wird dessenmask-type Eigenschaftswert verwendet oder dessenmask-type Attribut, falls vorhanden. Wenn keines davon explizit gesetzt ist, wird dieser Wert standardmäßig aufluminance gesetzt.
• Wenn die Quelle des Maskenbildes ein<image> oder ein<gradient> ist, werden diealpha Werte des Maskenbildes verwendet.

Beschreibung

Eine Maske überträgt ihre Transparenz und, abhängig vom Maskentyp, ihre Luminanz auf das Element, das sie maskiert.Wenn die Maske vom Typ<image> ist, bestimmen standardmäßig die Alphawerte des Maskenbildes die Sichtbarkeit jedes Teils des maskierten Elements: Wo die Maske undurchsichtig ist, ist der entsprechende Teil des maskierten Elements sichtbar; wo die Maske durchscheinend ist, ist das Element ebenfalls durchscheinend, wobei diese Bereiche des Elements verborgen sind. Dies ist das Standardverhalten für<image> Masken, wenn diemask-mode Eigenschaft aufmatch-source gesetzt ist oder standardmäßig darauf gesetzt wird, und es ist immer der Fall, wennmask-mode explizit aufalpha gesetzt ist.

Luminanz verstehen

Beiluminance Masken hängt die Sichtbarkeit des maskierten Elements sowohl von der Opazität der Maske als auch von der Helligkeit der Farbe der undurchsichtigen Bereiche ab. Weiße (100% Luminanz) undurchsichtige Bereiche (alpha = 1) werden maskiert und sichtbar sein, und schwarze Bereiche (0% Luminanz) transparent (alpha = 0) werden ausgeschnitten. Bereiche mit Farben zwischen weiß und schwarz und mit teilweiser Opazität werden teilweise maskiert, was die Luminanz und Alpha-Transparenz jeder Farbe widerspiegelt, die die Maske bildet.

Die Opazität einerluminance Maske wird durch dieR,G,B undA Werte einerrgb() Farbe mit der Formel bestimmt:

((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A

Zum Beispiel ist die Farbegreen#008000 oderrgb(0% 50% 0% / 1). In einerluminance Maske wird jeder Bereich, der von einer solidengreen Maske maskiert wird,35.77% undurchsichtig sein. Wenn dermask-mode für diese Maske aufalpha gesetzt ist, dagreen eine vollständig undurchsichtige Farbe ist, wird der maskierte Bereich100% undurchsichtig sein.

Mehrere Werte

Jedermask-mode Wert ist eine durch Kommas getrennte Liste von Werten. Wenn mehrere Werte vorhanden sind, entspricht jeder Wert einer Maskenebene in der gleichen Position in dermask-image Eigenschaft. Die Werte definieren, ob die zugehörigen Maskenbilder alsluminance oderalpha Maske behandelt werden.

match-source verstehen

Im Fall vonmatch-source hängt es davon ab, obluminance oderalpha verwendet wird, je nachdem, welche Maskenmodus der Maskenquelle hat. Wenn diemask-image Eigenschaftswerte sich auf ein SVG<mask> Element beziehen, wird dermask-type Eigenschaftswert des<mask> Elements verwendet. Wenn keine CSSmask-type Eigenschaft auf dem<mask> Element gesetzt ist, wird der Wert desmask-type Attributs des<mask> Elements verwendet, wenn vorhanden und unterstützt. Wenn keines davon explizit gesetzt ist, wird dieser Wert standardmäßig aufluminance gesetzt; jedoch nur im Fall des<mask> Elements als Maskenquelle. Andernfalls, wie zuvor erwähnt, wenn die Maskenbildquelle ein<image> und nicht ein SVG<mask> ist, werden diealpha Werte der Maskenebene des Bildes verwendet.

Formale Definition

Formale Syntax

mask-mode =
<masking-mode>#

<masking-mode> =
alpha|
luminance|
match-source

Beispiele

Verwendung und Werte

Dieses Beispiel demonstriert die grundlegende Verwendung und die verschiedenen Werte dermask-mode Eigenschaft.

HTML

Wir fügen drei<div> Elemente ein, um die drei aufgezähltenmask-mode Schlüsselwortwerte zu demonstrieren.

<div>ALPHA</div><div>LUMINANCE</div><div>MATCH-SOURCE</div>

CSS

Jedes<div> erhält das gleiche Hintergrund- und Maskenbild. Der einzige Unterschied zwischen den<div> ist der Wert dermask-mode Eigenschaft:

div {  background: blue linear-gradient(red, blue);  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");}.alpha {  mask-mode: alpha;}.luminance {  mask-mode: luminance;}.matchSource {  mask-mode: match-source;}

div {  width: 227px;  height: 200px;  float: left;  text-align: center;  line-height: 65px;  color: white;  text-shadow: 1px 1px 2px black;  font-family: sans-serif;}

Ergebnisse

Da die Maskenquelle ein<image> und kein SVG<mask> ist, löst sich dermatch-source Wert zualpha auf.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• mask-type
• mask-image
• mask Kurzform
• Einführung in das CSS-Maskieren
• CSSmask Eigenschaften
• Deklarieren mehrerer Masken
• CSS-Masking Modul