CSS mask-image – Bilder maskieren

Motive mit weichem Rand einbinden

Für lange Zeit mussten Fotos im Bildbearbeitungsprogramm freigestellt werden, um Motive ohne Hintergrund bzw. mit transparentem Hintergrund auf der Webseite einzusetzen. Bevor sich das Bildformat WebP in den modernen Browsern durchgesetzt hatte, kamen nur GIF und PNG als Speicherformate für freigestellte Motive in Frage.

CSS mask-image braucht eine Schablone, die als PNG, PNG-24, WebP oder SVG gespeichert wird, aber auch ein CSS-Verlauf kann die Rolle der Maske übernehmen.

+ =

.soft {
	mask-image: url("maske.webp");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

Heute können wir anstelle von PNG24-Freistellern das sparsame WebP für die Schablone einsetzen. Die Farbe der Maske / Schablone spielt keine Rolle, nur die Deckkraft zählt.

mask-image animieren

Macht das WebP-Dateiformat für Bilder CSS mask-image nicht überflüssig? Im Grunde genommen – ja. WebP speichert eine Alpha-Maske mit weichen und harten Übergängen effizienter als das volle Bild zzgl. Maske.

Aber mask-image bringt Wiederholungen und Animationen in die Maske.

.pattern {
	mask-image: url("svg/mask-image-circle.svg");
	mask-size: 50%;
	mask-repeat: no-repeat;
	animation: position 10s infinite linear;
}

@keyframes position {
	0% { mask-position: 0% 0%;  mask-position: 0% 0%;}
	25% { mask-position: 100% 0%; mask-position: 100% 0%; }
	50% { mask-position: 100% 100%; mask-position: 100% 100%; }
	75% { mask-position: 0% 100%; mask-position: 0% 100%; }
	100% { mask-position: 0% 0%; mask-position: 0% 0%; }
}

.repeated-raute {
	mask-image: url("raute.svg");
	mask-size: 1%;
}

mask-image mit CSS gradient

Als Maske kann anstelle eines Bildes ein Verlauf – linear Gradient – eingesetzt werden. Bei Chrome wirkt aber allem Anschein nach nur -webkit-mask: …, während Safari und Firefox auch ohne Präfix mitmachen.

<img class="lg" loading="lazy" src="spieluhr-920.webp"
	srcset="spieluhr-460.webp 460w,
			spieluhr-920.webp 920w"
	sizes="(max-width: 460px) 100vw, 920px"
	width="920" height="771" alt="mask-image mit CSS gradient">

.lg {
    mask: linear-gradient( to top, transparent 5%, black 20%, black 80%, transparent 90%);
    -webkit-mask: linear-gradient( to top, transparent 5%, black 20%, black 80%, transparent 90%);
}

Text-Masken für Bilder

Text kann ebenfalls als Maske verwendet werden – das Verfahren nutzt CSS background-clip.

.tmask {
	font-size: clamp(8rem, 16vw, 16rem);
	background: url(spieluhr.webp);
	background-clip: text;
	color: transparent;
}

Am Rande: Schriftgröße mit vw an den ViewPort anpassen oder Schriftgröße mit CSS clamp anpassen

Text maskieren

So ziemlich alle HTML-Elemente können mit CSS mask-image maskiert werden – Text genauso wie das Video.

Auf Browser, die mask nicht unterstützen, wirken sich die Masken nicht aus: Bilder und Videos werden weiterhin angezeigt, wenn auch ohne Alphamaske.