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 :

cross-fade() - Fonction CSS

cross-fade()

Résumé des caractéristiques de la fonction cross-fade()

Description rapide
Réalise le mélange de plusieurs images.
Statut
Problèmes de compatibilité
Module W3C
Module CSS - Images
Références (W3C)
Statut du document:: WD (document de travail)

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

Syntaxe simplifiée permettant de mélanger deux images seulement. Cette syntaxe n'est plus standardisée mais cependant reconnue par de nombreux navigateurs.

g est un dégradé de couleur, défini par l'une des fonctions CSS relatives aux dégradés.
C est une couleur.

cross-fade(
Schéma syntaxique de la propriété CSSPremière syntaxe, non standardisée) de la fonction cross-fade() en CSS. url() url() image() image() image-set() image-set() element() element() g g c c , , {2} {2} % %">%
)

Syntaxe complète permettant de mélanger autant d'images que nécessaire. Cette syntaxe est malheureusement encore peu reconnue par les navigateurs.

g est un dégradé de couleur, défini par l'une des fonctions CSS relatives aux dégradés.
C est une couleur.

cross-fade(
Schéma syntaxique de la propriété CSSSyntaxe standardisée de la fonction cross-fade() en CSS. % % url() url() image() image() image-set() image-set() element() element() g g c c , , {1,n} {1,n}
)
  • 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 :

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

Mélange de deux images (syntaxe simplifiée)
 
Mélange d'une image et d'une dégradé de couleurs
(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.

Mélange de plusieurs images
(syntaxe complète)
 
Mélange d'une image et d'une dégradé de couleurs
(syntaxe complète)
Mélange d'une image et d'une couleur
(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.

1
cross-fade()
Estimation de la prise en charge en pourcentage du parc actuel.
95%

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

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

Propriétés.

Définit l'orientation d'une image (doit-elle être tournée ?)
Mode de mise à l'échelle des images.
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
Position d'une image ou d'une vidéo par rapport à son container.

Fonctions.

Définit un dégradé de couleurs conique.
Récupère l'aspect d'un élément sous forme d'une image.
Désigne ou définit une image.
Propose au navigateur un choix d'images.
Détermine un dégradé de couleur linéaire.
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Définit un dégradé de couleurs conique, avec répétition
Détermine un dégradé de couleur linéaire avec répétition.
Détermine un dégradé de couleur radial avec répétition.
Définit une image en bande de couleurs.