Brouillon
Cette page n'est pas terminée.

La fonction CSS cross-fade() peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.

Attention ! À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.

Syntaxe (spécification)

La fonction cross-fade() prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.

Cette fonction pourra être utilisée à tout endroit où une image (cf. <image>) CSS peut être utilisée.

Utilisation des pourcentages

Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.

cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
cross-fade(url(white.png)  25%, url(black.png)  75%); /* 25% blanche, 75% noire*/
cross-fade(url(white.png)  50%, url(black.png)  50%); /* 50% blanche, 50% noire */
cross-fade(url(white.png)  75%, url(black.png)  25%); /* 75% blanche, 25% noire */
cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche */
cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */

Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.

Les lignes précédentes peuvent ainsi s'écrire également :

cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
cross-fade(url(white.png)  25%, url(black.png)); /* 25% blanche, 75% noire*/
cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */
cross-fade(url(white.png)  75%, url(black.png)); /* 75% blanche, 25% noire */
cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */

Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).

Syntaxe formelle

cross-fade( <cf-mixing-image> , <cf-final-image>? )


<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>


<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )


<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>


<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>


<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>


<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Exemples

HTML

<div id="div"></div>

CSS

#div {
    width: 300px;
    height: 300px;
    background-image: cross-fade(
        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
        url('https://mdn.mozillademos.org/files/8545/tr.png'));
}

Résultat

Ancienne syntaxe (implémentations)

cross-fade( <image, <image>, <percentage> )

La spécification de la fonction cross-fade() permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec -webkit- pour Chrome, Opera et les autres navigateurs basés sur Blink.

cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
cross-fade(url(white.png), url(black.png), 25%);  /* 25% blanche, 75% noire */
cross-fade(url(white.png), url(black.png), 50%);  /* 50% blanche, 50% noire */
cross-fade(url(white.png), url(black.png), 75%);  /* 75% blanche, 25% noire */
cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */

Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.

Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.

Exemples

CSS

.crossfade {
    width: 300px;
    height: 300px; 
    background-image: -webkit-cross-fade( 
        url('https://mdn.mozillademos.org/files/8543/br.png'), 
        url('https://mdn.mozillademos.org/files/8545/tr.png'),
        75%);
    background-image: cross-fade(
        url('https://mdn.mozillademos.org/files/8543/br.png'),
        url('https://mdn.mozillademos.org/files/8545/tr.png'),
        75%);
}

HTML

<div class="crossfade"></div>

Résultat

Accessibilité

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'cross-fade()' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
cross-fade()
Expérimentale
Chrome Support complet 17
Préfixée Notes
Support complet 17
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15
Préfixée Notes
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Safari Support complet 10
Notes
Support complet 10
Notes
Notes Supports the original dual-image with percentage implementation only.
Support complet 5.1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
WebView Android Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Chrome Android Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Firefox Android Aucun support NonOpera Android Support complet 14
Préfixée Notes
Support complet 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Safari iOS Support complet 9.3
Notes
Support complet 9.3
Notes
Notes Support for the original dual-image with percentage implementation only.
Support complet 5
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Supports the original dual-image with percentage implementation only.
Samsung Internet Android Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for the original dual-image with percentage implementation only.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,