Bilder mit CSS cross-fade() überblenden

Das Überblenden zweier Bilder in CSS ohne zusätzliches Markup oder JavaScript bedeutete früher, Elemente mit position: absolute zu stapeln und opacity-Werte für jedes einzelne zu jonglieren. Die cross-fade()-Funktion beseitigt diesen Aufwand vollständig, indem sie direkt in Ihrem Stylesheet einen einzelnen überblendeten <image>-Wert erzeugt.

Was CSS cross-fade() tatsächlich macht

cross-fade() ist eine bilderzeugende CSS-Funktion, die in der CSS Images Level 4-Spezifikation definiert ist. Sie nimmt zwei oder mehr Bilder – Bitmap-Dateien, Verläufe, SVGs oder Volltonfarben –, überblendet sie mit angegebenen Gewichtungen und gibt einen einzelnen <image>-Wert aus. Da die Ausgabe ein Bildtyp ist, können Sie sie überall dort verwenden, wo CSS ein Bild erwartet: background-image, mask-image oder die content-Eigenschaft bei Pseudo-Elementen.

Diese Unterscheidung ist wichtig. Im Gegensatz zum Schichten zweier background-image-Werte und der Anwendung von background-blend-mode setzt cross-fade() die Eingaben vor dem Rendering zu einem Ergebnis zusammen. Keine zusätzlichen DOM-Knoten, keine Nebenwirkungen durch Stacking-Kontexte.

Wie die prozentualen Gewichtungen funktionieren

Jedes Argument nimmt einen optionalen Prozentwert, der steuert, wie deckend diese Eingabe in der finalen Überblendung ist. Einige Regeln bestimmen die Berechnung:

• Keine Prozentangaben deklariert: Eingaben teilen sich gleichmäßig auf. Zwei Bilder erhalten jeweils 50%; drei Bilder jeweils ~33,3%.
• Einige Prozentangaben ausgelassen: Der Browser summiert die deklarierten Werte, subtrahiert von 100% und verteilt den Rest gleichmäßig auf die nicht spezifizierten Eingaben.
• Summe überschreitet 100%: Der Rest ist negativ, sodass jede nicht spezifizierte Eingabe als 0% (vollständig transparent) behandelt wird.
• Summe liegt unter 100%: Die Differenz wirkt wie eine unsichtbare transparente Ebene, die die Lücke füllt.

/* Gleichmäßige Überblendung — keine Prozentangaben erforderlich */
cross-fade(url(a.jpg), url(b.jpg)) /* 50% / 50% */

/* Gewichtete Überblendung */
cross-fade(url(a.jpg) 70%, url(b.jpg) 30%)

/* Drei Eingaben, eine nicht spezifiziert — erhält den Rest (30%) */
cross-fade(url(a.jpg) 40%, url(b.jpg) 30%, url(c.jpg))

Spezifikations-Syntax vs. WebKit-Implementierung

Hier wird es uneinheitlich. Die CSS Images Level 4-Spezifikation definiert cross-fade() mit Unterstützung für mehrere Eingaben und unabhängige Prozentangaben pro Eingabe. Die ältere WebKit-Implementierung – die noch das ist, was Chromium-basierte Browser und Safari tatsächlich rendern – akzeptiert genau zwei Argumente und einen Prozentwert, der nur auf das erste Bild angewendet wird.

Stand Anfang 2026: Chromium-basierte Browser unterstützen die -webkit--präfixierte Legacy-Syntax. Safari unterstützt sowohl die präfixierte als auch die unpräfixierte Legacy-Syntax. Firefox implementiert cross-fade() überhaupt nicht. Sie können den aktuellen Status auf WebStatus überprüfen.

Verwenden Sie @supports, um beide Syntaxen mit einem soliden Fallback zu schichten:

/* Basis-Fallback — alle Browser */
.hero {
  background-image: url('fallback.jpg');
}

/* Legacy WebKit-Syntax — Chrome, Safari */
@supports (background-image: -webkit-cross-fade(url(a), url(b), 50%)) {
  .hero {
    background-image: -webkit-cross-fade(
      url('photo.jpg'),
      linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)),
      60%
    );
  }
}

/* Spezifikations-Syntax — zukunftsorientiert */
@supports (background-image: cross-fade(url(a) 50%, url(b))) {
  .hero {
    background-image: cross-fade(
      url('photo.jpg') 60%,
      linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))
    );
  }
}

Praktische Anwendungsfälle für CSS-Bildüberblendung

CSS-Bildkomposition mit cross-fade() ist besonders nützlich, wenn Sie einen visuellen Effekt ohne zusätzliches Markup wünschen:

• Bildeinfärbung: Überblenden Sie ein Foto mit einer Volltonfarbe oder einem Verlauf, um direkt in CSS eine Markenfärbung anzuwenden.
• Verlaufs-Overlays: Legen Sie einen abdunkelnden Verlauf über ein Hero-Bild für bessere Textlesbarkeit ohne Pseudo-Element.
• Leichtgewichtige Textureffekte: Überblenden Sie eine SVG-Textur mit einem flachen Farbhintergrund.

Wofür es nicht gut geeignet ist: animierte Übergänge zwischen Bildern mit Timer. Dafür bleiben opacity-Keyframe-Animationen auf gestapelten Elementen der kompatibler und besser steuerbare Ansatz.

cross-fade() vs. verwandte CSS-Werkzeuge

Hinweis zur Barrierefreiheit

Hintergrundbilder – einschließlich solcher, die durch cross-fade() erzeugt werden – sind für Screenreader unsichtbar. Wenn das überblendete Bild eine für die Seite kritische Bedeutung vermittelt, stellen Sie diesen Inhalt stattdessen im HTML dar und stellen Sie ausreichenden Farbkontrast zwischen Text und dem überblendeten Hintergrund sicher.

Fazit

cross-fade() ist ein fokussiertes Werkzeug: Es setzt Bilder auf Stylesheet-Ebene zusammen, hält Ihr Markup sauber und funktioniert heute in Chromium und Safari mit dem -webkit--Präfix. Schreiben Sie zuerst den Fallback, schichten Sie den @supports-Block darüber, und Sie haben eine progressiv erweiterte CSS-Bildüberblendungs-Lösung, die in Firefox elegant degradiert, bis die Unterstützung verfügbar wird.

Häufig gestellte Fragen

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..