Cross-fade() - Fonction CSS

Schéma syntaxique de cross-fade().

Les liens sur les schémas donnent accès à plus de détails. Les termes utilisés sont décrits ci-dessous :

• image est une image, spécifiée avec l'une des fonctions suivantes : url(), image(), image-set(), cross-fade(), stripes(), element().
• gradient est 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().
• color est une couleur, spécifiée par son code hexadécimal, son nom, ou avec l'une des fonctions rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

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 valeur cross-fade() peut être utilisée avec les propriétés suivantes :

• background-image : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).

Syntaxes 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).
• 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 d'utilisation de la fonction cross-fade().

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

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.

Support de la fonction cross-fade().

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.

Remarques :

(1) Nécessite le préfixe du navigateur -webkit-.

1

Fonction
cross-fade()

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

1

QQ Browser

1

Opéra Mobile

1

Firefox

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction cross-fade().

• Module CSS - Images et contenu remplacé

  Introduction de la fonction cross-fade() dans ce niveau de la spécification relative aux images.
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi, concernant le traitement des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction cross-fade() fait partie du module CSS Images Module qui regroupe tout ce qui concerne le type image (les dégradés par exemple).

Propriétés :

Fonctions :