Einführung in CSS-Masking

Was ist Masking in CSS?

In CSS können Masken verwendet werden, um Bereiche eines Elements zu definieren, die sichtbar sind, und andere Bereiche, die verborgen werden. Maskenschichten, definiert durch eine oder mehrere mask-image-Quellen, bestimmen die Bereiche eines Elements, die sichtbar sein sollen, und in welcher Deckkraft.

Bei alpha-Masken entspricht die Deckkraft des maskierten Elements der aufgebrachten Maskendeckkraft. Im CSS ist Masking das Gegenteil einer Maskerade-Maske, bei der das Gesicht überall dort verborgen ist, wo die Maske undurchsichtig ist. Im CSS werden die Bereiche des Elements, in denen seine Maske vollständig undurchsichtig ist, vollständig undurchsichtig und sichtbar. Wo immer die Maske vollständig transparent ist, wird das Element vollständig verborgen. Bereiche des Elements, die durch teilweise undurchsichtige Maskenbereiche maskiert werden, sind teilweise undurchsichtig und entsprechen der Masken-Deckkraft.

Bei Alphamasken ist die Farbe der Maske irrelevant. Nur die Deckkraft der Maske zählt. Bei Luminanzmasken wird die Helligkeit der Maskenfarben berücksichtigt, um die Deckkraft des maskierten Elements zu bestimmen. Je heller und undurchsichtiger die Farbe, desto undurchsichtiger ist das Element. Je dunkler und transparenter die Farbe, desto weniger undurchsichtig sind die Masken.

Masken können mithilfe von CSS-Gradienten, Rasterbildern (wie PNGs) und SVG-<mask>-Elementen definiert werden. In diesem Leitfaden stellen wir die verschiedenen Arten von Maskenbildern vor, während wir Undurchsichtigkeit und Transparenz, Luminanz und Masking versus CSS-Clipping besprechen.

Jede Maskenschicht besteht aus einem mask-image, das relativ zu einer Ursprungsbox positioniert wird. Die Maskenbilder können skaliert, wiederholt und abgeschnitten werden. In Fällen, in denen mehrere Maskenbilder deklariert sind, kann festgelegt werden, wie die Maskenschichten kombiniert werden. Diese werden im Leitfaden zu Masking-Eigenschaften behandelt.

Hinweis: Alle Beispiele verwenden das folgende Bild als Grundlageselement, auf das Masken angewendet werden:

Undurchsichtigkeit versus Transparenz

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag"
  class="applied-mask" />
<div class="mask-source"></div>

body {
  display: flex;
  gap: 20px;
  padding: 15px;
  background-image:
    linear-gradient(to right, transparent 50%, rgb(0 0 0 / 0.05) 50%),
    linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / 0.05) 50%);
  background-size: 20px 20px;
}
div,
svg,
img {
  width: 220px;
  aspect-ratio: 1;
}

Bei Alphamasken werden die sichtbaren Bereiche eines Elements durch die Alphatransparenz der darauf angewendeten Maske definiert. Wo immer die Maske vollständig undurchsichtig ist, wird das Element sichtbar sein. An jedem Pixel, wo die Maske vollständig transparent ist, wird das Element ebenfalls vollständig verborgen sein. Bereiche des Elements, die durch einen teilweise undurchsichtigen Abschnitt einer Maske maskiert werden, sind teilweise undurchsichtig und entsprechen der Deckkraft der darauf angewendeten Maske.

Mit Gradienten

Um dies zu demonstrieren, betrachten wir ein Beispiel mit einem conic-gradient() als mask-image. CSS-Gradienten, einschließlich kegelförmiger Gradienten, können verwendet werden, um sanfte Übergänge zwischen sichtbaren und versteckten Bereichen zu erstellen.

In diesem Fall ist die obere rechte Ecke der Maske vollständig undurchsichtig, das obere linke Viertel ist vollständig transparent und die untere Hälfte hat einen weichen Übergang zwischen undurchsichtig und transparent.

.applied-mask {
  mask-image: conic-gradient(black 90deg, transparent 270deg);
}
.mask-source {
  background: conic-gradient(black 90deg, transparent 270deg);
}

Beachten Sie, wie das Element, auf das die Maske angewendet wird, eine vollständig sichtbare obere rechte Ecke hat, das obere linke Viertel verborgen ist und die untere Hälfte sanft von sichtbar zu transparent übergeht, was die Sichtbarkeit des angewendeten Maskenbildes widerspiegelt.

Bei Alphamasken spielt die Farbe der Maske keine Rolle, nur die Transparenz. In diesem Beispiel haben wir einen gestreiften Verlauf mit vollständig undurchsichtigen roten, halbundurchsichtigen roten und vollständig transparenten Streifen.

.applied-mask {
  mask-image: repeating-linear-gradient(
    to bottom right,
    red 0 20px,
    #ff000055 20px 40px,
    transparent 40px 60px
  );
}
.mask-source {
  background: repeating-linear-gradient(
    to bottom right,
    red 0 20px,
    #ff000055 20px 40px,
    transparent 40px 60px
  );
}

Beachten Sie, wie die vollständig undurchsichtigen Maskenbereiche vollständig undurchsichtige Elementpixels enthüllen, halbtransparente Maskenbereiche halbtransparente Bereiche erzeugen und vollständig transparente Maskenbereiche die zugehörigen Bereiche vollständig verbergen.

Mit importierten Bildern

Die vorherigen beiden Beispiele verwendeten Gradienten als Masken und Hintergrundbilder. Das Maskenbild muss kein CSS-Bild sein. Es kann ein externes Bild oder ein SVG sein.

In diesem Fall verwenden wir ein externes PNG. Das Bild enthält ein buntes Herz mit transparentem Hintergrund.

.applied-mask {
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png");
  mask-size: 220px 220px;
}
.mask-source {
  background: url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png");
  background-size: 220px 220px;
}

Beachten Sie, wie die transparenten Maskenbereiche das Element zuschneiden; die einzigen sichtbaren Teile des Elements sind die Bereiche, in denen die Maske undurchsichtig ist. Die Farbe der Maske selbst spielt keine Rolle.

Alphatransparenz versus Luminanz

Der Standardwert der mask-mode-Eigenschaft — match-source — setzt den Modus auf alpha oder luminance, abhängig vom Wert. Der match-source-Wert wird für alle anderen Maskenquellen als SVG-<mask>-Elemente auf alpha aufgelöst. Wenn die Maskenquelle ein <mask>-Element ist, wird match-source auf den Wert der <mask>-mask-type-Eigenschaft aufgelöst, falls gesetzt. Andernfalls wird es auf den Wert des SVG-mask-type-Attributs gesetzt, das auf dem <mask>-Element festgelegt ist. Wenn auch dies nicht explizit festgelegt wird, wird match-source auf luminance aufgelöst.

Wenn mask-mode auf luminance aufgelöst wird, oder wir es explizit auf luminance setzen, beeinflussen die Farben der Maske die Masken-Deckkraft. Im vorherigen Demo-Programm wurde der mask-mode nicht festgelegt, sodass der Wert standardmäßig auf match-source gesetzt wurde. Da das bunte Herzbild ein transparentes PNG ist, wird match-source auf alpha aufgelöst. Durch explizites Setzen dieser Eigenschaft können wir den Modus steuern. In diesem Demo-Programm ändern wir den mask-mode zu luminance.

.applied-mask {
  mask-mode: luminance;
}

Bei der Anwendung von mask-mode: luminance auf dieselbe Maske wie im vorherigen Beispiel sind die Bereiche des Elements, in denen die Maske am hellsten ist, undurchsichtiger, während dunklere Bereiche weniger undurchsichtig sind.

Die Deckkraft einer Luminanzmaske wird durch die R, G, B und A Werte einer RGB-Farbe über die Formel bestimmt:

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

Zum Beispiel ist die neueste <named-color> rebeccapurple, die #663399 ist. Während man annehmen könnte, dass die Helligkeit dem L der hsl()-Funktion entsprechen könnte, ist es nicht so einfach. Der Wert #663399 entspricht rgb(40% 20% 60% / 1) und hsl(270 50% 40% / 1), aber der Helligkeitswert ist 27.134%, nicht 40%.

((0.2125 * 0.4) + (0.7154 * 0.2) + (0.0721 * 0.6)) * 1 = 0.27134

Weiß hat einen Helligkeitswert von 100%.

((0.2125 * 1) + (0.7154 * 1) + (0.0721 * 1)) * 1 = 1

Die Helligkeit von Schwarz ist 0%.

((0.2125 * 0) + (0.7154 * 0) + (0.0721 * 0)) * 1 = 0

Wir demonstrieren dies, indem wir Weiß (rgb(100% 100% 100%)) mit einer Helligkeit von 100% bei 27.234% Deckkraft zu einem rebeccapurple, weiß und schwarz linearen Verlauf hinzufügen, den wir dann verwenden, um unser Bild zu maskieren. Dieses Weiß löst sich zu demselben Deckkraftwert auf:

((0.2125 * 1) + (0.7154 * 1) + (0.0721 * 1)) * 0.27134 = 0.27134

.applied-mask {
  mask-image: repeating-linear-gradient(
    to bottom left,
    rebeccapurple 0 20px,
    rgb(100% 100% 100% / 0.27134) 20px 40px,
    black 40px 45px,
    white 45px 50px
  );
  mask-mode: luminance;
}
.mask-source {
  background: repeating-linear-gradient(
    to bottom left,
    rebeccapurple 0 20px,
    rgb(100% 100% 100% / 0.27134) 20px 40px,
    black 40px 45px,
    white 45px 50px
  );
}

:has(:checked) .applied-mask {
  mask-mode: alpha;
}

<label><input type="checkbox" /><code>mask-mode: alpha;</code></label>

Die Bereiche mit einer weißen Maske sind vollständig undurchsichtig. Die Bereiche mit einer schwarzen Maske sind vollständig transparent. Die Bereiche mit einer rebeccapurple Maske und die Bereiche mit einer 27.1234% undurchsichtigen weißen Maske sind beide 27.1234% undurchsichtig.

Wenn Sie den mask-mode auf alpha umschalten, spielt die Farbe des Gradienten keine Rolle mehr. Das gesamte Element wird undurchsichtig sein, außer den Bereichen, die von dem halbtransparenten Weiß überdeckt werden.

Die mask-mode-Eigenschaft ermöglicht die Verwendung von Rasterbildern ohne Alphatransparenz, wie JPEGs, als Maskenbilder. Ein JPEG besteht aus undurchsichtigen Pixeln. Die Verwendung eines JPEGs als Maske mit seinem Standard-alpha-Maskenmodus würde das gesamte Element verbergen. Der luminance-Wert des mask-mode hingegen schneidet das Element dort ab, wo die Maske schwarz (keine Helligkeit) ist, ist vollständig undurchsichtig, wo die Maske undurchsichtig weiß (100% Helligkeit) ist, und andere Bereiche sind halbtransparent basierend auf der Helligkeit des Maskenbereichs, der es maskiert.

In diesem Beispiel haben wir einen weißen Mond gegen einen schwarzen Nachthimmel.

.applied-mask {
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/moon.jpg");
  mask-mode: luminance;
  mask-size: 220px;
}
.mask-source {
  background: url("https://mdn.github.io/shared-assets/images/examples/moon.jpg");
  background-size: 220px;
}

Das Element wird dort abgeschnitten und ist nicht sichtbar, wo der Himmel schwarz ist. Das Bild ist am sichtbarsten, wo der Mond am hellsten ist.

In diesem Fall, wenn Sie den mask-mode auf alpha umschalten, wird das gesamte Element sichtbar, da die gesamte Maske undurchsichtig ist.

SVG <mask> als Maskenquelle

Eine Maske kann jeder Typ von CSS-<image> oder ein <mask-source> sein. Ein <mask-source> ist ein <url>-Verweis auf ein SVG-<mask>-Element. Dies ist ähnlich wie das Clipping mit der CSS-clip-path-Eigenschaft, in welchem Fall die "Maske" ein SVG-<clipPath>-Element anstelle ist (beim clip-path spielt die Luminanz des Pfads keine Rolle).

In diesem Beispiel definieren wir ein SVG mit einem <mask>-Element, einem identischen <clipPath>-Element und einem identischen <path>-Element, damit Sie die Masken- und Clippingpfadquelle sehen können.

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag"
  class="applied-mask" />
<svg class="mask-source">
  <mask id="mask-heart">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="rgb(255 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 1)"
      stroke-width="20" />
  </mask>
  <clippath id="clip-heart">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="rgb(255 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 1)"
      stroke-width="20" />
  </clippath>
  <path
    d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
    fill="rgb(255 0 0 / 0.5)"
    stroke="rgb(255 255 255 / 1)"
    stroke-width="20" />
</svg>
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag"
  class="applied-clip" />

.applied-mask {
  mask-image: url("#mask-heart");
}
.applied-clip {
  clip-path: url("#clip-heart");
}

:has(:checked) .applied-mask {
  mask-mode: alpha;
}
body {
  flex-flow: row wrap;
}

<label><input type="checkbox" /><code>mask-mode: alpha;</code></label>

Da die Bildquelle ein <mask> ist und die mask-type-CSS-Eigenschaft noch das mask-type-SVG-Attribut festgelegt ist, ist der mask-type standardmäßig alpha, sodass die Standardeinstellung von mask-mode: match-source auf luminance aufgelöst wird. Dies liegt daran, dass für Maskenquellen, die SVG-<mask>-Elemente sind, der mask-type standardmäßig luminance ist, es sei denn, das mask-type-Attribut wird explizit auf alpha gesetzt.

Da wir weder das mask-type-Attribut noch die CSS-Eigenschaft auf unserer Maske gesetzt haben, wird die Standardeinstellung der mask-mode-Eigenschaft match-source auf luminance aufgelöst. Aktivieren Sie das Kontrollkästchen, um den mask-mode-Wert auf alpha zu setzen, oder lassen Sie es auf match-source standardmäßig.

Dieses Beispiel zeigte auch den Unterschied zwischen Maskieren und Clipping in CSS. Sie werden feststellen, dass Luminanz und Alphatransparenz relevant für das Maskieren sind, aber nicht für das Clipping. Masking kann verwendet werden, um die Deckkraft eines Elements zu steuern, während Clipping alles innerhalb des Clippingpfads zeigt und die Teile des Elements außerhalb des Clippfades vollständig verbirgt. Abgeschnittene Bereiche sind völlig unsichtbar, während maskierte Bereiche teilweise oder vollständig sichtbar sein können.

Wenn Sie nur Formen benötigen, kann Clipping ausreichen. Wenn Sie jedoch Verblassen, variable Deckkraft oder sogar Steuerung von Position und Größe benötigen (was wir in einem separaten Leitfaden besprechen werden), ist Masking besser geeignet.

Siehe auch

• Einführung in CSS-Clipping
• CSS-mask-Eigenschaften
• Deklaration mehrerer Masken
• CSS-Masking-Modul