Maskenbild | CSS-Tricks

Eine mask in CSS verbirgt einen Teil des Elements, auf das sie angewendet wird.

.element {
  mask-image: url(star.svg);
}

Angenommen, Sie hätten ein Element mit einem fotografischen Hintergrund und eine schwarz-weiße SVG-Grafik als Maske, wie diese

Sie könnten das Bild als background-image und die Maske als mask-image auf demselben Element festlegen und etwas wie das hier erhalten

Masken haben viel mit Hintergründen gemeinsam, insofern als Sie sie wie Hintergründe skalieren, positionieren und wiederholen können. Sehen Sie sich die zugehörigen Eigenschaften unten an. Aber hier ist eine weitere interessante Sache an Masken, die sie mit Hintergründen teilen: Sie können Farbverläufe sein.

Hier ist dieselbe Hintergrundgrafik, nur mit einem linear-gradient-Maskenbild, das sie abdeckt, wodurch die Oberseite transparent wird und die Unterseite, die gar nicht transparent ist, ausgeblendet wird.

Das funktioniert, weil die Oberseite des linear-gradient transparent ist. Ich hätte angenommen, dass es auch funktioniert, wenn es white wäre, solange der mask-type luminance wäre, aber das scheint bei mir in keinem Browser zu funktionieren.

Apropos luminance-Masken, das scheint für Bilder als Masken, die im Rasterformat wie JPG oder PNG vorliegen, bei mir nicht zu funktionieren. Update: Leser Micheal Hall schreibt mit einer Demo, dass es möglicherweise etwas mit der Verwendung der langformigen Eigenschaften zu tun hat. Firefox scheint dieses Konzept zu unterstützen, wenn Sie nur die Kurzform verwenden.

Aber Alpha-Masken scheinen einwandfrei zu funktionieren. Wie bei Rastergrafiken, die tatsächliche Alpha-Transparenz verwenden. Wie diese

Und nur um einen Punkt zu beweisen, eine Farbanimation, die man durch die Maske sehen kann

Die Eigenschaft mask-image kann auch direkt innerhalb von SVG-Elementen verwendet werden. Zum Beispiel diese elliptische Maske, die auch einen Weichzeichner-Filter hat.

Es sieht irgendwie so aus, als könnte man diese SVG-Maske schnappen und auf andere Elemente mit mask-image: url(#mask); anwenden, aber ich finde, dass das tatsächlich nicht funktioniert. Es funktioniert nur innerhalb von SVG und hat den unangenehmen Nebeneffekt, ein Bild vollständig zu löschen, wenn es außerhalb der SVG verwendet wird.

Browser-Unterstützung

Diese Browser-Supportdaten stammen von Caniuse, das mehr Details bietet. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.