Cross-fade() - Fonction CSS
Résumé des caractéristiques de la fonction cross-fade()
Schéma syntaxique de cross-fade().
cross-fade()Assez bien prise en charge par les navigateurs
Syntaxe complète de la fonction
cross-fade()Encore peu traitée par les navigateurs
Les liens sur les schémas donnent accès à plus de détails. Les termes utilisés sont décrits ci-dessous :
imageest une image, spécifiée avec l'une des fonctions suivantes :url(),image(),image-set(),cross-fade(),stripes(),element().gradientest un dégradé de couleur, défini par l'une des fonctions CSS relatives aux dégradés :conic-gradient(),linear-gradient(),radial-gradient(),repeating-conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient().colorest une couleur, spécifiée par son code hexadécimal, son nom, ou avec l'une des fonctions [rgb()ourgba(),hsl()ouhsla(),hwb(),lab(),oklab(),lch(),oklch(),color()}.
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.La désignation des images peut se faire de multiples façons :
- Avec l'une des fonctions
url(),image(),image-set(),element(). - Il peut s'agir d'un dégradé de couleurs :
linear-gradient(),conic-gradient(),radial-gradient()ou les fonctions équivalentes en dégradés répétitifs. - Ou encore, l'une des images peut être une simple couleur (voir les couleurs CSS).
- Avec l'une des fonctions
- 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.
Remarque : la syntaxe accepte que les pourcentages soient placés avant ou après la spécification des images.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.
Comme avec la première syntaxe, la liste peut comporter des images (spécifiées de multiples façons), des dégradés, ou de simples couleurs.
Exemples.
Exemple (syntaxe simplifiée).
Dans une première version, la fonction cross-fade() ne permettait de mélanger que deux images.
Certains navigateurs traitent encore cette syntaxe simplifiée en préfixant avec -webkit-.
-webkit-cross-fade( url(img1), url(img2), p%)
(syntaxe simplifiée)
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.
(syntaxe complète)
(syntaxe complète)
(syntaxe complète)
Compatibilité et prise en charge par les navigateurs.
La fonction cross-fade() est encore mal prise en charge par les navigateurs, comme vous le verrez sur
le tableau des compatibilités ci-dessous.
cross-fade()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que cross-fade().
Les spécifications CSS éditées par le W3C sont organisées en modules. cross-fade() fait partie du module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.