# Verlaufs-Overlay in CSS: Bilder richtig tönen und abdunkeln [Canonical HTML page](https://gradiently.design/de/guide/css-gradient-overlay) Einen Verlauf über ein Foto zu legen kostet eine zusätzliche Zeile CSS. Welche der drei Methoden du wählst, entscheidet, ob das Bild schnell lädt, das Overlay animiert werden kann und die Worte darauf lesbar bleiben. ## The short version - Das schnellste Verlaufs-Overlay in CSS ist eine zweite Hintergrundebene: Nenn den Verlauf in background-image vor url(), damit er oben liegt. - Bei einem img-Element legst du den Verlauf auf ein Pseudo-Element ::before oder ::after eines positionierten Wrappers. - background-blend-mode und mix-blend-mode machen aus einem Verlaufs-Overlay eine Farbwaschung, die das Bild tönt, statt es zu verdecken. - Als CSS-Hintergrund gesetzte Hero-Bilder werden später entdeckt als img-Elemente, daher lädt ein img mit Overlay im sichtbaren Bereich meist schneller. - Overlays, die Text tragen sollen, sind hinter den Worten am dunkelsten und sonst transparent, kein gleichmäßiger dunkler Film über dem ganzen Foto. Das einfachste **Verlaufs-Overlay in CSS** ist ein Ebenenhintergrund: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. Zuerst genannte Ebenen werden oben gezeichnet, also liegt der Verlauf über dem Foto. Ist das Bild ein ``-Element, legst du den Verlauf stattdessen auf ein Pseudo-Element, und wenn die Farbe das Foto tönen statt verdecken soll, ergänzt du einen Blend Mode. Jede Methode passt zu einer anderen Aufgabe. ## Methode 1: ein Ebenenhintergrund `background-image` akzeptiert eine durch Kommas getrennte Liste. Der erste Wert ist die oberste Ebene. Verläufe und Bilder lassen sich frei mischen, und jede Ebene kann eigene Größe und Position haben, wenn du diese Eigenschaften in derselben Reihenfolge angibst. Das ist die richtige Wahl für dekorative Bilder, die keinen Alt-Text brauchen. ```css .banner { background-color: #0f172a; /* shows until the photo loads */ background-image: linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%), url("/images/workshop.jpg"); background-size: cover; background-position: center; color: #f8fafc; } ``` Eine dunkle Fläche links für Text, die sich bis 70 Prozent auflöst, damit die rechte Seite des Fotos hell bleibt. Die Fallback-Farbe passt zum Overlay, sodass Text lesbar ist, noch bevor das Bild ankommt. - Seitenfläche für Text: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)` - Balken oben und unten: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)` - Weiche Vignette: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)` - Diagonale Markentönung: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)` Vier Overlay-Presets, hier über der Seite gezeigt. Setz einen davon in deinem eigenen `background-image` vor `url()`. Die Balken oben und unten passen zu Galerien, bei denen oben ein Titel und unten ein Bildnachweis steht. Die Vignette zieht den Blick nach innen, ohne Text zu tragen. Die Markentönung ist ein starker Look für Teamseiten und Event-Banner; [Verlaufs-Overlays](https://gradiently.design/de/guide/gradient-overlay) erklärt aus Designsicht, wann welches passt. ## Methode 2: ein Pseudo-Element über einem img Inhaltsbilder gehören in ``-Elemente: Sie bekommen Alt-Text, responsives `srcset`, Lazy Loading und werden vom Browser früh entdeckt. Ein Hintergrundverlauf kann nicht über einem `` liegen, also umschließ es und leg den Verlauf auf das Pseudo-Element des Wrappers. ```html
Fishing boats moored in a small harbour at dusk
Harbour Days, 14 to 16 June
``` Ein echtes Bildelement mit echtem Alt-Text. Die Bildunterschrift liegt dann auf dem Overlay. ```css .overlay { position: relative; margin: 0; isolation: isolate; } .overlay img { display: block; width: 100%; height: 100%; object-fit: cover; } .overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%); pointer-events: none; transition: opacity 250ms ease-out; } .overlay figcaption { position: absolute; inset: auto 1.5rem 1.5rem; z-index: 1; color: #f8fafc; } .overlay:hover::after { opacity: 0.6; } ``` `isolation: isolate` hält die Stapelung des Overlays innerhalb der Figure. Das Overlay kann beim Hover ausblenden, weil es eine eigene Ebene ist. ### Hintergrundebene - Ein Element, eine Deklaration - Kein Alt-Text, also nur für dekorative Bilder - Vom Browser spät gefunden, was einen Hero bremsen kann - Overlay lässt sich nicht ausblenden, ohne den ganzen Hintergrund zu animieren ### img plus Pseudo-Element - Ein Wrapper und ein paar Zeilen mehr - Richtiger Alt-Text und responsives `srcset` - Früh entdeckt; `fetchpriority="high"` hilft dem Hauptbild - Die Deckkraft des Overlays wechselt günstig Bei einem Hero-Bild, das das größte Element auf dem Bildschirm ist, gewinnt meist die zweite Methode beim Ladetempo. [Bilder fürs Web optimieren](https://gradiently.design/de/guide/lighthouse-image-performance) erklärt, warum der Browser ``-Elemente früher findet als CSS-Hintergründe. ## Methode 3: Blend Modes für Farbwaschungen Ein einfaches Overlay liegt auf dem Foto wie getöntes Glas. Ein Blend Mode mischt den Verlauf in die Lichter und Schatten des Fotos selbst, sodass es aussieht, als wäre das Foto in dieser Farbe aufgenommen. Nutze `background-blend-mode` für Ebenenhintergründe und `mix-blend-mode` auf einem Pseudo-Element über einem ``. | Blend Mode | Was er tut | Gutes Overlay für | | --- | --- | --- | | `multiply` | Dunkelt ab; weiße Bereiche nehmen die Farbe des Verlaufs an | Satte, stimmungsvolle Tönungen auf hellen Fotos | | `screen` | Hellt auf; schwarze Bereiche nehmen die Farbe an | Luftige, verblasste Looks auf dunklen Fotos | | `overlay` | Hebt den Kontrast und drückt Farbe in die Mitteltöne | Knackige Markenfarbe auf Porträts | | `color` | Behält das Licht des Fotos, ersetzt seine Farbe | Duotone-Waschungen aus einem zweifarbigen Verlauf | | `soft-light` | Eine sanfte Version von overlay | Dezente Wärme oder Kühle | Die fünf Modi, die du kennen solltest. `color` mit einem zweifarbigen Verlauf ist das schnellste Duotone im Web. ```css /* Duotone wash on a layered background */ .duotone { background-image: linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%), url("/images/portrait.jpg"); background-size: cover; background-blend-mode: color; } /* The same idea over an img element */ .overlay--wash::after { background: linear-gradient(135deg, #1e1b4b, #f472b6); mix-blend-mode: color; } ``` `background-blend-mode` mischt Ebenen eines Elements. `mix-blend-mode` mischt ein Element mit allem dahinter, hier dem Foto. Die ganze Technik, inklusive der Wahl der zwei Farben, steht in [dem Duotone-Effekt](https://gradiently.design/de/guide/duotone-effect). ## Overlays, die Text lesbar halten Der häufigste Fehler ist ein gleichmäßiger dunkler Film über dem ganzen Foto, sagen wir 50 Prozent Schwarz. Er macht das Bild überall stumpf und ist hinter den Worten vielleicht trotzdem nicht dunkel genug. Form das Overlay stattdessen: am dunkelsten unter dem Text, klar dort, wo das Foto zählt. 1. **Entscheide, wo die Worte stehen** Unten links für Bildunterschriften, linkes Drittel für Hero-Text, Mitte für eine einzelne Zeile. 2. **Richte den Verlauf auf sie** Nutze `to top` für Text unten, `to right` für Text links oder einen radialen Verlauf, der auf den Worten zentriert ist. 3. **Hör früh auf** Lauf bis 60 bis 70 Prozent ins völlig Transparente aus, damit der Großteil des Fotos unberührt bleibt. 4. **Prüf den schlimmsten Fall** Miss den Kontrast dort, wo das Foto hinter einem Buchstaben am hellsten ist. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) nennt die Verhältnisse. Weich auslaufende Scrims mit vielen Stopps wirken glatter als ein Übergang mit zwei Stopps; die Methode steht in [transparente Verläufe in CSS](https://gradiently.design/de/guide/css-gradient-transparent). ## Overlays ohne Rätselraten Auf einer Website stimmst du jedes Overlay von Hand ab. Bei Social Posts, Bannern und Folien überspringt Gradiently diesen Schritt: Ein Mark weiß, wo deine Worte stehen, und vertieft oder hebt seine eigenen Farben dahinter, Fotos lassen sich in den Farben des Marks als Mono, Duotone oder Waschung tönen, und mit Pro passt sich das Design in einem Schritt an jedes Format an, ohne Overlay, das du nacharbeiten musst. Ein breites Event-Banner für die Hafentage mit einem Verlaufshintergrund, der hinter dem Titel tiefer wird Ein Event-Banner in Website-Hero-Größe, bei dem sich der Hintergrund hinter den Worten beruhigt, statt eines von Hand abgestimmten Overlays. ## FAQ ### Wie lege ich in CSS einen Verlauf über ein Hintergrundbild? Nenn den Verlauf in `background-image` vor dem Bild: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Die erste Ebene wird oben gezeichnet. ### Wie ergänze ich ein Verlaufs-Overlay auf einem img-Element? Umschließ das Bild mit einem positionierten Element und leg den Verlauf auf dessen Pseudo-Element `::after` mit `position: absolute` und `inset: 0`. ### Was ist der Unterschied zwischen background-blend-mode und mix-blend-mode? `background-blend-mode` mischt die Hintergrundebenen eines Elements. `mix-blend-mode` mischt ein ganzes Element mit dem, was dahinter liegt. ### Wie dunkel sollte ein Bild-Overlay für Text sein? Dunkel genug, dass der Text die Kontrastprüfung an der hellsten Stelle dahinter besteht. Form den Verlauf so, dass er dort am dunkelsten und sonst klar ist. ### Kann ich ein Verlaufs-Overlay beim Hover animieren? Ja. Leg das Overlay auf ein Pseudo-Element und animiere seine `opacity`, das ist günstiger, als den Hintergrund selbst zu animieren.