Fusionner des images avec CSS cross-fade()

Composer deux images en CSS sans balisage supplémentaire ni JavaScript nécessitait auparavant d’empiler des éléments avec position: absolute et de jongler avec les valeurs d’opacity sur chacun. La fonction cross-fade() élimine complètement cette complexité en produisant une seule valeur <image> fusionnée directement dans votre feuille de style.

Ce que fait réellement CSS cross-fade()

cross-fade() est une fonction CSS génératrice d’image définie dans la spécification CSS Images Level 4. Elle prend deux images ou plus — fichiers bitmap, dégradés, SVG ou couleurs unies — les fusionne avec des pondérations spécifiées et produit une seule valeur <image>. Comme le résultat est un type image, vous pouvez l’utiliser partout où CSS en attend une : background-image, mask-image ou la propriété content sur les pseudo-éléments.

Cette distinction est importante. Contrairement à la superposition de deux valeurs background-image avec application de background-blend-mode, cross-fade() compose les entrées en un seul résultat avant le rendu. Pas de nœuds DOM supplémentaires, pas d’effets de bord liés au contexte d’empilement.

Fonctionnement des pondérations en pourcentage

Chaque argument accepte un pourcentage optionnel qui contrôle l’opacité de cette entrée dans la fusion finale. Quelques règles régissent le calcul :

• Aucun pourcentage déclaré : les entrées se partagent équitablement. Deux images obtiennent chacune 50% ; trois images obtiennent chacune ~33,3%.
• Certains pourcentages omis : le navigateur additionne les valeurs déclarées, soustrait de 100% et distribue le reste équitablement entre les entrées non spécifiées.
• La somme dépasse 100% : le reste est négatif, donc toute entrée non spécifiée est traitée comme 0% (totalement transparente).
• La somme est inférieure à 100% : le manque agit comme une couche transparente invisible comblant l’écart.

/* Fusion égale — aucun pourcentage nécessaire */
cross-fade(url(a.jpg), url(b.jpg)) /* 50% / 50% */

/* Fusion pondérée */
cross-fade(url(a.jpg) 70%, url(b.jpg) 30%)

/* Trois entrées, une non spécifiée — obtient le reste (30%) */
cross-fade(url(a.jpg) 40%, url(b.jpg) 30%, url(c.jpg))

Syntaxe de spécification vs. implémentation WebKit

C’est là que les choses deviennent inégales. La spécification CSS Images Level 4 définit cross-fade() avec support de multiples entrées et pourcentages indépendants par entrée. L’ancienne implémentation WebKit — toujours celle que les navigateurs basés sur Chromium et Safari rendent effectivement — accepte exactement deux arguments et un pourcentage appliqué uniquement à la première image.

Début 2026 : les navigateurs basés sur Chromium supportent la syntaxe héritée préfixée -webkit-. Safari supporte à la fois la syntaxe héritée préfixée et non préfixée. Firefox n’implémente pas du tout cross-fade(). Vous pouvez vérifier l’état actuel sur WebStatus.

Utilisez @supports pour superposer les deux syntaxes avec un secours solide :

/* Secours de base — tous les navigateurs */
.hero {
  background-image: url('fallback.jpg');
}

/* Syntaxe héritée WebKit — 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%
    );
  }
}

/* Syntaxe de spécification — orientée futur */
@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))
    );
  }
}

Cas d’usage pratiques de fusion d’images CSS

La composition d’images CSS avec cross-fade() est particulièrement utile lorsque vous souhaitez un effet visuel sans ajouter de balisage :

• Teinte d’image : fusionnez une photo avec une couleur unie ou un dégradé pour appliquer une teinte de marque directement en CSS.
• Superpositions de dégradé : superposez un dégradé assombrissant sur une image hero pour améliorer la lisibilité du texte sans pseudo-élément.
• Effets de texture légers : fusionnez une texture SVG avec un arrière-plan de couleur unie.

Ce pour quoi elle n’est pas bien adaptée : les transitions animées entre images sur une minuterie. Pour cela, les animations par images-clés d’opacity sur des éléments empilés restent l’approche la plus compatible et contrôlable.

cross-fade() vs. outils CSS associés

Note d’accessibilité

Les images d’arrière-plan — y compris celles produites par cross-fade() — sont invisibles pour les lecteurs d’écran. Si l’image fusionnée véhicule une signification essentielle à la page, représentez ce contenu dans le HTML à la place, et assurez un contraste de couleur suffisant entre tout texte et l’arrière-plan fusionné.

Conclusion

cross-fade() est un outil ciblé : il compose des images au niveau de la feuille de style, garde votre balisage propre et fonctionne aujourd’hui dans Chromium et Safari avec le préfixe -webkit-. Écrivez d’abord le secours, superposez le bloc @supports par-dessus, et vous disposez d’une solution de fusion d’images CSS progressivement améliorée qui se dégrade élégamment dans Firefox en attendant l’arrivée du support.

FAQ

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