Verlaufs-Overlay in CSS: Bilder richtig tönen und abdunkeln

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

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

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 erklärt aus Designsicht, wann welches passt.

Methode 2: ein Pseudo-Element über einem img

Inhaltsbilder gehören in <img>-Elemente: Sie bekommen Alt-Text, responsives srcset, Lazy Loading und werden vom Browser früh entdeckt. Ein Hintergrundverlauf kann nicht über einem <img> liegen, also umschließ es und leg den Verlauf auf das Pseudo-Element des Wrappers.

<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>

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

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 erklärt, warum der Browser <img>-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 <img>.

/* 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;
}

Die ganze Technik, inklusive der Wahl der zwei Farben, steht in dem Duotone-Effekt.

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

   Entscheide, wo die Worte stehen

   Unten links für Bildunterschriften, linkes Drittel für Hero-Text, Mitte für eine einzelne Zeile.

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

   Prüf den schlimmsten Fall

   Miss den Kontrast dort, wo das Foto hinter einem Buchstaben am hellsten ist. Farbkontrast und Barrierefreiheit 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.

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.