Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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 :

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%)

Exemple avec la syntaxe complète.

Cette nouvelle syntaxe, encore très peu traitée par les navigateurs, permet de mélanger un nombre quelconque d'images, tout en dosant l'opacité de chacune de ces images.

Compatibilité et prise en charge par les navigateurs.

Cette fonction est encore peu prise en charge par les navigateurs, comme vous le verrez sur le tableau des compatibilités ci-dessous.

Afficher les versions antérieures   Afficher la version à venir