mask-mode

Die mask-mode Eigenschaft kann mehrere durch Komma getrennte <masking-mode> Schlüsselwortwerte annehmen, darunter:

alpha

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

luminance

Gibt an, dass die Luminanz- (Helligkeits-) Werte des Maskenbildes verwendet werden sollen.

match-source

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

• Wenn die mask-image ein SVG <mask> referenziert, wird der Wert der mask-type Eigenschaft oder das mask-type Attribut verwendet, falls vorhanden. Wenn keines explizit gesetzt ist, ist dieser Wert standardmäßig luminance.
• Wenn die Maskenbildquelle ein <image> oder ein <gradient> ist, werden die alpha-Werte des Maskenbildes verwendet.

Eine Maske überträgt ihre Transparenz und je nach Maskentyp deren Luminanz auf das maskierte Element. Wenn die Maske vom Typ <image> ist, bestimmen standardmäßig die Alpha-Werte 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 es das Element auch, wobei diese Bereiche des Elements verborgen sind. Dies ist das Standardverhalten für <image>-Masken, wenn die mask-mode Eigenschaft auf match-source gesetzt ist oder dazu standardmäßig gesetzt wird, und es ist immer der Fall, wenn der mask-mode explizit auf alpha gesetzt wird.

Bei luminance-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, und schwarze Bereiche (0% Luminanz) transparent (Alpha = 0) werden ausgeblendet. Bereiche mit Farben zwischen Weiß und Schwarz und mit teilweiser Deckkraft werden teilweise maskiert, wobei die Luminanz und die Alpha-Transparenz jeder Farbe, die die Maske ausmacht, reflektiert wird.

Die Deckkraft einer luminance-Maske wird durch die R, G, B, und A Werte einer rgb()-Farbe bestimmt, wobei die Formel verwendet wird:

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

Zum Beispiel ist die Farbe green #008000 oder rgb(0% 50% 0% / 1). In einer luminance-Maske wird jeder Bereich, der von einer soliden green-Maske maskiert wird, 35,77% undurchsichtig sein. Wenn der mask-mode für diese Maske auf alpha gesetzt ist, da green eine vollständig undurchsichtige Farbe ist, wird der maskierte Bereich 100% undurchsichtig sein.

Jeder mask-mode Wert ist eine durch Komma getrennte Liste von Werten. Wenn mehrere Werte vorhanden sind, entspricht jeder Wert einer Maskenschicht an derselben Position in der mask-image Eigenschaft. Die Werte definieren, ob die zugeordneten Maskenbilder als luminance- oder alpha-Maske behandelt werden.

Im Fall von match-source hängt die Verwendung von luminance oder alpha vom Maskenmodus der Maskenquelle ab. Wenn die mask-image Eigenschaftswert eine Referenz zu einem SVG-<mask>-Element ist, wird der <mask>-Elementwert der mask-type-Eigenschaft verwendet. Wenn auf dem <mask>-Element keine CSS-mask-type-Eigenschaft gesetzt ist, wird der Wert des <mask>-Element-mask-type-Attributs verwendet, falls vorhanden und unterstützt. Wenn keines explizit gesetzt ist, ist dieser Wert standardmäßig luminance; aber nur im Fall des <mask>-Elements als Maskenquelle. Andernfalls, wie zuvor erwähnt, wenn die Maskenbildquelle ein <image>, anstatt eines SVG-<mask> ist, werden die alpha-Werte der Maskenschichtbilder verwendet.

mask-mode = 
  <masking-mode>#  

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

Dieses Beispiel zeigt die grundlegende Nutzung und verschiedene Werte der mask-mode Eigenschaft.

HTML

Wir enthalten drei <div>-Elemente, um die drei aufgezählten mask-mode Schlüsselwortwerte zu demonstrieren.

<div class="alpha">ALPHA</div>
<div class="luminance">LUMINANCE</div>
<div class="matchSource">MATCH-SOURCE</div>

CSS

Jedes <div> wird mit demselben Hintergrund- und Maskierungsbild versehen. Der einzige Unterschied zwischen den <div> ist der Wert der mask-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 der match-source-Wert zu alpha auf.

• mask-type
• mask-image
• mask Kurzschreibweise
• Einführung in CSS-Masking
• CSS mask Eigenschaften
• Deklarieren mehrerer Masken
• CSS Masking Modul