Diemask-modeCSS Eigenschaft wird auf das zu maskierende Element gesetzt. 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 kommagetrennte<masking-mode> Schlüsselwortwerte annehmen, einschließlich:

alpha

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

luminance

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

match-source

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

• Wennmask-image auf ein SVG<mask> verweist, wird dessenmask-type Eigenschaftswert oder dasmask-type Attribut, falls vorhanden, verwendet. Wenn keines explizit gesetzt ist, wird dieser Wert standardmäßig aufluminance gesetzt.
• Wenn die Maskenbildquelle ein<image> oder ein<gradient> ist, werden diealpha Werte des Maskenbilds 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 Alpha-Werte des Maskenbilds 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 es auch das Element, wobei diese Bereiche des Elements verborgen sind. Dies ist das Standardverhalten für<image> Masken, wenn diemask-mode Eigenschaft aufmatch-source gesetzt oder standardmäßig auf diesen Wert zurückfällt, und es ist immer der Fall, wennmask-mode explizit aufalpha gesetzt ist.

Luminanz verstehen

Im Fall vonluminance Masken hängt die Sichtbarkeit des maskierten Elements sowohl von der Deckkraft 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 abgeschnitten. Bereiche mit Farben zwischen Weiß und Schwarz und mit teilweiser Deckkraft werden teilweise maskiert, wobei die Luminanz und Alpha-Transparenz jeder Farbe, die die Maske bildet, reflektiert wird.

Die Deckkraft 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 abgedeckt wird35.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 kommagetrennte Liste von Werten. Wenn mehrere Werte vorhanden sind, entspricht jeder Wert einer Maskenebene in der gleichen Position in dermask-image Eigenschaft. Die Werte legen fest, ob die zugehörigen Maskenbilder alsluminance oderalpha Maske behandelt werden.

match-source verstehen

Im Fall vonmatch-source hängt es davon ab, obluminance oderalpha je nach Maskenmodus der Maskenquelle verwendet wird. Wenn diemask-image Eigenschaft auf ein SVG<mask> Element verweist, wird der<mask> Elementmask-type Eigenschaftswert verwendet. Wenn keine CSSmask-type Eigenschaft auf dem<mask> Element gesetzt ist, wird der Wert des<mask> Elementmask-type Attributs verwendet, falls vorhanden und unterstützt. Wenn keines explizit gesetzt ist, fällt dieser Wert standardmäßig aufluminance zurück; jedoch nur im Fall des<mask> Elements als Maskenquelle. Andernfalls, wie bereits erwähnt, werden, wenn die Maskenbildquelle ein<image> und nicht ein SVG<mask> ist, diealpha Werte des Maskenlayerbilds 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 verschiedene 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 jedem<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 nicht ein SVG<mask> ist, wird dermatch-source Wert aufalpha aufgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• mask-type
• mask-image
• mask Kurzschrift
• Einführung zu CSS-Maskierung
• CSSmask Eigenschaften
• Deklaration mehrerer Masken
• CSS-Maskierungsmodul