CSS mask-image – Bilder maskieren

Motive mit weichem Rand einbinden

CSS mask-image arbeitet mit einer Schablone, die als PNG, PNG-24, WebP oder SVG gespeichert wird, aber auch ein CSS-Verlauf kann die Rolle der Maske übernehmen. Nur unter den opakten Bereichen der Maske wird das maskierte Element sichtbar.

+ =

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

Allerdings bringt mask-image bringt Animationen in die Maske – hier ändert animiert CSS die Maske.

<div class="pattern"></div>

.pattern {
	background: url('katz.webp');
	mask-image: url('circle-mask.svg');
	mask-repeat: no-repeat;
}

<svg width="100%" height="100%" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<radialGradient id="c1" cx="0.5" cy="0.5" r="0.5">
    <stop offset="0" stop-color="hsla(0,0%,0%,1)" />
    <stop offset=".8" stop-color="hsla(0,0%,0%,0.5)" />
    <stop offset="1" stop-color="hsla(0,0%,0%,0)" />
</radialGradient>
<style>
circle {
	animation: grow 10s infinite;
	transform-origin: center center;
}

@keyframes grow {
	from {transform: scale(1) }
	to {transform: scale(4) }
}
</style>
<circle cx="250" cy="250" r="50" style="fill:url(#c1)"/>
</svg>

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.