CSS mask-image – Bilder maskieren

CSS mask

CSS mask-image stellt Fotos und Texte anhand von WebP- oder PNG-Bildern sowie von SVG-Pfaden oder Verläufen (gradient) frei. Das Originalfoto bleibt erhalten, denn CSS mask-image ist »nicht-destruktiv« und die Maske oder Schablone kann jederzeit per CSS geändert werden.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

mask-spieluhr-460 + maske-spieluhr = mask-spieluhr-460
.soft {
	mask-image: url("maske.webp");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-image: url("maske.webp");
	-webkit-mask-repeat: no-repeat;
	-webkit-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.

Mit Browser-Präfix? Echt jetzt? Echt, immer noch maskiert nur Firefox ordentlich ohne Browser-Präfix. Chrome und Safari brauchen den Browser-Präfix weiterhin, IE11 steht natürlich außen vor.

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.

mask-spieluhr-460
Volles Bild 7KB
maske-spieluhr
Maske 6KB
mask-spieluhr-freigestellt-460
WebP mit integrierter Maske 11KB

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

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

@keyframes position {
	0% { mask-position: 0% 0%;  -webkit-mask-position: 0% 0%;}
	25% { mask-position: 100% 0%; -webkit-mask-position: 100% 0%; }
	50% { mask-position: 100% 100%; -webkit-mask-position: 100% 100%; }
	75% { mask-position: 0% 100%; -webkit-mask-position: 0% 100%; }
	100% { mask-position: 0% 0%; -webkit-mask-position: 0% 0%; }
}
mask-image animiert
.repeated-raute {
	mask-image: url("raute.svg");
	mask-size: 1%;
	-webkit-mask-image: url("raute.svg");
	-webkit-mask-size: 1%;
}

mask-image mit CSS gradient

Als Maske kann anstelle eines Bildes ein Verlauf – linear Gradient oder radial Gradient – eingesetzt werden.

mask-image mit CSS gradient
HTML
<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">
CSS
.lg {
    mask: radial-gradient( black 40%, transparent 70%);
    -webkit-mask: radial-gradient( black 40%, transparent 70%);
}

Text-Masken für Bilder

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

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

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.