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 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. Kann ich CSS-Masken verwenden?

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 Image zu übergeben. Das Maskenbild muss einen transparenten oder halbtransparenten Bereich haben.

Ein vollständig transparenter Bereich hat zur Folge, dass der darunter liegende Teil des Bilds unsichtbar ist. Wenn Sie einen halbtransparenten Bereich verwenden, ist ein Teil des Originalbildes sichtbar. Im Glitch unten siehst du den Unterschied. Das erste Bild ist das Originalbild der Ballons ohne Maske. Auf das zweite Bild wurde eine Maske mit einem weißen Stern auf einem vollständig transparenten Hintergrund angewendet. 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 Property 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 besteht darin, ein <mask>-Element in der SVG zu haben und auf die ID dieses Elements in der mask-image-Eigenschaft 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.

Es geht jedoch nicht alles verloren. Wie beim Maskieren eines Bildes am häufigsten das Bild in die SVG-Datei aufgenommen wird, kann das Bild in die SVG-Datei aufgenommen werden.

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. Dies 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.

In diesem Artikel habe ich ein schönes Schachbrettmuster gefunden. Der Code mit Hintergrundbildern sieht wie folgt 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 für Hintergrundbilder entwickelte Muster in eine Maske umwandeln möchten, müssen Sie die background-*-Attribute durch die relevanten mask-Attribute ersetzen, einschließlich der -webkit-Präfixe.

-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;

Durch die Anwendung von Farbverlaufsmustern auf Bilder lassen sich einige wirklich tolle Effekte erzielen. Du kannst einen Remix des Glitch erstellen und andere Varianten testen.

Mit CSS-Masken können Sie nicht nur das Beschneiden, sondern auch Bilder und andere HTML-Elemente ansprechender gestalten, ohne eine Grafikanwendung verwenden zu müssen.

Foto von Julio Rionaldo bei Unsplash