Fonction cross-fade

 

CSS - Fonction cross-fade()

Description de la fonction cross-fade().

La fonction cross-fade() réalise la superposition et le mélange de plusieurs images, tout en gérant la transparence partielle de chacune des images. L'image de dessus ne cache donc pas les images situées en dessous.

La fonction cross-fade() présente des problèmes de compatibilité avec de nombreux navigateurs. De plus, une syntaxe ancienne, qui n'est plus standardisée, est pourtant encore utilisée. N'hésitez pas à utiliser les préfixes spécifiques à chaque navigateur : -moz-, -webkit-, etc.

La fonction cross-fade() peut être utilisée avec :

• background-image : Image d'arrière-plan.

Syntaxe de la fonction cross-fade().

• background: cross-fade(url('img/fichier1.png'), url('img/fichier2?png'), 50%); img1 img2 p

  Cette première syntaxe, non standardisée, de cross-fade() permet de mélanger deux images seulement, en indiquant un seul pourcentage, qui sera appliqué à la première image, la deuxième image recevant le pourcentage complémentaire pour obtenir 100% au total.

• background: cross-fade( url('chemin/fichier1.png') 30%, url('chemin/fichier2.png') 50%, url('chemin/fichier3.png') 20% );

  Cette syntaxe standardisée permet de mélanger un nombre quelconque d'images, en indiquant un pourcentage pour chacune d'elles.

  Si la somme des pourcentages dépasse 100%, le navigateur applique un coefficient à chacun des pourcentages pour obtenir 100% au total.

  Par contre, si la somme des pourcentages est inférieure à 100%, le navigateur ne corrige pas les valeurs indiquées. L'image résultat peut donc avoir une certaine transparence, qui correspond au pourcentage manquant.

Exemples.

Exemple (ancienne syntaxe).

Dans une première version, la fonction cross-fade() ne permettait de mélanger que deux images. Certains navigateurs traitent encore cette ancienne syntaxe en préfixant avec -webkit-.

-webkit-cross-fade( url(img1), url(img2), p%)