Mit der CSS-Eigenschaft „mask-image“ Effekte auf Bilder anwenden

Mit der CSS-Maskierung können Sie ein Bild als Maskenebene verwenden. Das bedeutet, dass Sie ein Bild, ein SVG oder einen Farbverlauf als Maske verwenden können, um ohne Bildbearbeitungsprogramm interessante Effekte zu erzielen.

Wenn du ein Element mithilfe der clip-path-Eigenschaft zuschneidest, wird der zugeschnittene Bereich unsichtbar. Wenn Sie stattdessen einen Teil des Bilds undurchsichtig machen oder einen anderen Effekt darauf anwenden möchten, müssen Sie eine Maske verwenden. In diesem Beitrag wird beschrieben, wie Sie die Eigenschaft mask-image in CSS verwenden, mit der Sie ein Bild als Maskenebene angeben können. Sie haben dann drei Möglichkeiten: Sie können eine Bilddatei, ein SVG oder einen Farbverlauf als Maske verwenden.

Browserkompatibilität

CSS-Masken sind zwar erst seit Kurzem verfügbar, die meisten Funktionen von mask-image sind aber in älteren Browserversionen mit dem Präfix -webkit-mask-image verfügbar. Die folgenden Beispiele zeigen, wie Sie beide Properties zusammen verwenden, um die beste Browserunterstützung zu erhalten.

Mit einem Bild maskieren

Das Attribut mask-image funktioniert ähnlich wie das Attribut background-image. Verwenden Sie einen url()-Wert, um ein Bild einzugeben. Das Bild der Maske muss einen transparenten oder halbtransparenten Bereich haben.

Ein vollständig transparenter Bereich führt dazu, dass der Teil des Bildes darunter unsichtbar ist. Wenn Sie einen halbtransparenten Bereich verwenden, kann ein Teil des Originalbilds jedoch durchscheinen. Im folgenden CodePen können Sie den Unterschied sehen.

  • Das erste Bild ist das Originalbild der Ballons ohne Maske.
  • Auf dem zweiten Bild ist eine Maske mit einem weißen Stern auf einem vollständig transparenten Hintergrund zu sehen.
  • Das dritte Bild zeigt einen weißen Stern auf einem Hintergrund mit einem transparenten Farbverlauf.

In diesem Beispiel wird auch die Property mask-size mit dem Wert cover verwendet. Diese Property funktioniert genauso wie background-size. Verwenden Sie die Keywords cover und contain oder geben Sie eine Größe in einer gültigen Längeneinheit oder als Prozentsatz an.

Sie können die Maske auch wiederholen, genau wie Sie ein Hintergrundbild wiederholen würden, um ein kleines Bild als sich wiederholendes Muster zu verwenden.

Mit SVG maskieren

Anstatt eine Bilddatei als Maske zu verwenden, können Sie auch SVG verwenden. Es gibt verschiedene Möglichkeiten, dies zu erreichen. Die erste Möglichkeit besteht darin, ein <mask>-Element im SVG zu haben und in der mask-image-Property auf die ID dieses Elements zu verweisen.

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

Der Vorteil dieses Ansatzes besteht darin, dass die Maske auf jedes HTML-Element angewendet werden kann, nicht nur auf ein Bild.

Im häufigsten Fall, in dem ein Bild maskiert werden soll, können Sie es stattdessen in das SVG einfügen. Der erste Ansatz ist „Baseline Newly available“. Das Bild im SVG wird von älteren Browsern unterstützt, die die Version mit dem Präfix -webkit unterstützen.

Mit einem Farbverlauf maskieren

Mit einem CSS-Gradienten als Maske können Sie einen maskierten Bereich ganz einfach erstellen, ohne ein Bild oder SVG erstellen zu müssen.

Mit einem linearen Farbverlauf als Maske kann beispielsweise dafür gesorgt werden, dass der untere Teil eines Bildes unter einer Bildunterschrift nicht zu dunkel ist.

Sie können jeden der unterstützten Farbverlaufstypen verwenden und Ihrer Kreativität freien Lauf lassen. Im nächsten Beispiel wird ein radialer Farbverlauf verwendet, um eine kreisförmige Maske zu erstellen, die hinter dem Untertitel beleuchtet wird.

Mehrere Masken

Wie bei Hintergrundbildern können Sie auch mehrere Maskenquellen angeben und sie kombinieren, um den gewünschten Effekt zu erzielen. Das ist besonders nützlich, wenn Sie ein mit CSS-Verläufen generiertes Muster als Maske verwenden möchten. Für diese werden in der Regel mehrere Hintergrundbilder verwendet, sodass sie leicht in eine Maske umgewandelt werden können.

Ein Beispiel ist das Schachbrettmuster in diesen Mustern mit CSS-Gradienten. Der Code mit Hintergrundbildern sieht so aus:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Wenn Sie dieses oder ein anderes Muster, das für Hintergrundbilder entwickelt wurde, in eine Maske verwandeln möchten, müssen Sie die background-*-Eigenschaften durch die entsprechenden mask-Eigenschaften ersetzen, einschließlich derjenigen mit dem Präfix -webkit.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Mithilfe von Farbverlaufsmustern lassen sich wirklich schöne Effekte erzielen. Testen Sie einige andere Varianten, indem Sie den folgenden CodePen forken.

Neben dem Zuschneiden können Sie mit CSS-Masken Bilder und andere HTML-Elemente ansprechender gestalten, ohne eine Grafikanwendung verwenden zu müssen.