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.

Rachel Andrew

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 die Verwendung der CSS-Eigenschaft mask-image erläutert, 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

Die meisten Browser unterstützen die standardmäßige CSS-Maskierungseigenschaft nur teilweise. Sie müssen zusätzlich zur Standardeigenschaft das Präfix -webkit- verwenden, um die beste Browserkompatibilität zu erzielen. Unter Kann ich CSS-Masken verwenden? finden Sie vollständige Informationen zur Browserunterstützung.

Die Browserunterstützung für die Property mit Präfix ist zwar gut, aber wenn Sie Text über einem Bild sichtbar machen möchten, sollten Sie sich Gedanken darüber machen, was passiert, wenn die Maskierung nicht verfügbar ist. Es kann sinnvoll sein, Funktionsabfragen zu verwenden, um die Unterstützung von mask-image oder -webkit-mask-image zu erkennen und einen lesbaren Fallback bereitzustellen, bevor Sie die maskierte Version hinzufügen.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Mit einem Bild maskieren

Die Property mask-image funktioniert ähnlich wie die Property 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 Glitch unten siehst du den Unterschied. 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 verwende ich auch die Property mask-size mit dem Wert cover. Diese Eigenschaft funktioniert genauso wie background-size. Sie können die Keywords cover und contain verwenden oder dem Hintergrund eine Größe in einer gültigen Längeneinheit oder einem Prozentsatz zuweisen.

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.

Maskierung mit SVG

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.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -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. Leider ist Firefox der einzige Browser, der diesen Ansatz unterstützt.

Aber keine Sorge: Im häufigsten Fall, in dem ein Bild maskiert werden soll, können wir das Bild in das SVG einfügen.

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 einfachen 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 verwenden

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.

Als Beispiel habe ich in diesem Artikel ein schönes Schachbrettmuster gefunden. 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. Probiere es mit einem Remix des Glitch-Effekts und teste andere Variationen.

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

Foto von Julio Rionaldo auf Unsplash