Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction CSS image() définit une image (type <image>) à la façon du type <url> mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.

Note : Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur Image() pour l'interface HTMLImageElement.

Syntaxe

image( <image-tags>? [ <image-src>? , <color>? ]! )


<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


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


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Paramètres

image-tagsFacultatif
La directionnalité de l'image, la valeur ltr pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur rtl indiquera de droite à gauche.
image-srcFacultatif
Zéro, une ou plusieurs URL (<url>) ou chaînes de caractères (<string>) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.
colorFacultatif
Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via image-src.

Gestion de la directionnalité

Le premier paramètre de la fonction image() est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.

Fragments d'image

Une différence fondamentale entre url() et image() est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.

background-image: image('myimage.webp#xywh=0,20,40,60')

Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image myImage.webp commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.

La syntaxe pour l'identifiant de fragment #xywh=#,#,#,# prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La définition de la dimension spatiale de la spécification des média indique que les pourcentages peuvent également être pris en charge.

xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */

Les fragments d'image peuvent également être utilisés avec la notation url(). La syntaxe  #xywh=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation url(). Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.

Les navigateurs qui prennent en charge image() prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour image(), l'image résultante sera considérée invalide.

Couleur par défaut

Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction image() génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.

Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.

À la différence de background-color dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser image() afin de placer des couleurs sur d'autres images.

La taille du rectangle de couleur appliqué peut être défini grâce à la propriété background-size. Ce comportement diffère de background-color qui définit une couleur pour couvrir l'ensemble de l'élément. image(color) et background-color pourront être déplacés grâce aux propriétés background-clip et background-origin.

Exemples

Utiliser des images prenant en compte la directionnalité

<ul>
  <li dir="ltr">La puce est une flèche pointant à droite et située à gauche.</li>
  <li dir="rtl">La puce est la même flèche mais renversée pour pointer à gauche.</li>
</ul>
ul {
  list-style-image: image(ltr 'rightarrow.jpg');
}

Pour les éléments de la liste allant de gauche à droite (ceux avec dir="ltr" ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec dir="rtl" (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec transform: scalex(-1)). Le texte sera également affiché de gauche à droite.

Afficher une section d'une image

<div class="box">Vous pouvez survoler cet élément pour voir un autre curseur.</div>
.box:hover {
   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
}

Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un sprite mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.

Fournir des images alternatives

.help::before {
  content: image("try.webp", "try.svg", "try.gif");
}

Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe help. Si le navigateur prend en charge le format WebP, ce sera try.webp qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera try.svg qui sera affichée et sinon, ce sera try.gif qui sera utilisée.

Placer une couleur sur une image d'arrière-plan

.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
.quarterlogo {
  background-image: 
    image(rgba(0, 0, 0, 0.25)), 
    url("https://mdn.mozillademos.org/files/12053/firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}
<div class="quarterlogo">If supported, a quarter of this div has a darkened logo</div>

Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété background-color à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec image() et background-size (tout en empêchant l'aimge de se répéter grâce à background-repeat), le voile noir ne couvrira qu'un quart du conteneur.

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, il faudra décrire ces informations de façon sémantique dans le document.

Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan (background-color) pour chaque image d'arrière-plan (background-image), image() pourra être utile pour les images qui ne sont pas en arrière-plan.

Spécifications

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
image()
Expérimentale
Chrome ? Edge ? Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes The -moz-image-rect() function supports fragments as of Firefox 4.
IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes The -moz-image-rect() function supports fragments as of Firefox 4.
Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, estelle, ExE-Boss
Dernière mise à jour par : SphinxKnight,