Maskenbild - CSS-Tricks | CSS-Almanach 2025

Ein maskin CSS ausgeblendeter Teil des Elements wird angewendet.

.el ( mask-image: url(star.svg); )

Angenommen, Sie hatten ein Element mit einem fotografischen Hintergrund und eine Schwarzweiß-SVG-Grafik, die Sie wie folgt als Maske verwenden können:

Sie können das Bild als background-imageund die Maske als mask-imageauf dasselbe Element setzen und so etwas erhalten:

Masken haben viele Gemeinsamkeiten mit Hintergründen, da Sie sie in der Größe anpassen, positionieren und wiederholen können, und so weiter wie Hintergründe. Siehe die zugehörigen Eigenschaften unten. Aber noch etwas Interessantes an Masken, die sie mit Hintergründen teilen: Sie können Farbverläufe sein.

Hier ist dieselbe Hintergrundgrafik, nur mit einer linear-gradientMaske, die die Oberseite transparent macht und die Unterseite verblasst, die überhaupt nicht transparent ist:

Das funktioniert, weil die Spitze der linear-gradientist transparent. Ich hätte angenommen , es würde funktionieren , wenn es whiteauch so lange , wie das mask-typewar luminance, aber das an der Arbeit nicht für mich in jedem Browser zu sein scheint.

Apropos luminanceMasken, das scheint für Bilder als Masken, die für mich ein Rasterformat wie JPG.webp oder PNG sind, nicht zu funktionieren. Update : Leser Micheal Hall schreibt mit einer Demo, in der es möglicherweise etwas mit der Verwendung der Long-Hand-Eigenschaften zu tun hat. Firefox scheint dieses Konzept zu unterstützen, wenn Sie nur die Kurzschrift verwenden.

Aber Alpha-Masken scheinen gut zu funktionieren. Wie bei Rastergrafiken, die die tatsächliche Alpha-Transparenz verwenden. So was:

Und nur um einen Punkt zu beweisen, eine Farbanimation, die Sie durch die Maske sehen können:

Die mask-imageEigenschaft kann auch direkt in SVG-Elementen verwendet werden. Schauen Sie sich diese elliptische Maske an, die auch einen unscharfen Filter hat:

Es sieht so aus, als könnten Sie sich diese SVG-Maske schnappen und sie auf andere Elemente anwenden, mask-image: url(#mask);aber ich finde nicht, dass das tatsächlich funktioniert. Es funktioniert nur innerhalb von SVG und hat den bösen Nebeneffekt, dass ein Bild vollständig gelöscht wird, wenn es außerhalb von SVG verwendet wird.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.