Image() - Fonction CSS

Schéma syntaxique de image().

Description des termes utilisés sur le schéma :

• 'url' est l'adresse d'un fichier image. La fonction url() peut également être utilisée.
• color est une couleur de remplacement, spécifiée dans l'une des nombreuses syntaxes connues de CSS : voir Les couleurs.

Description de la fonction image().

La fonction image() est expérimentale, non standardisée, ou récemment standardisée par le W3C. Avant de l'utiliser, vérifier sa compatibilité avec les navigateurs actuels, et n'hésitez pas à utiliser les préfixes spécifiques à chaque navigateur (-moz-, -webkit-, etc.).

La fonction image() désigne un fichier image. Son rôle est donc comparable à celui de la fonction url() mais apporte quelques fonctionnalités supplémentaires :

• Possibilité de spécifier le sens de lecture, de droite à gauche ou de gauche à droite. Cette fonctionnalité est intéressante si l'image comporte du texte (une enseigne, une affiche, etc.) : l'image peut être retournée pour correspondre au sens de lecture du texte.
• Possibilité de définir un fragment de l'image (la fonction url() est normalement capable de traiter également les fragments d'image).
• Possibilité de définir plusieurs fichiers image afin de proposer des alternatives pour le cas où l'image principale serait indisponible ou dans un format non reconnu par le navigateur.
• Possibilité de définir une couleur par défaut pour le cas où la ou les images spécifiées ne seraient pas trouvées ou serait invalides.

La valeur image() 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).
• border-image-source : Définit l'image utilisée pour construire la bordure.
• list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
• mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes de la fonction image().

• background: image('chemin/fichier.png');

  Dans cette première syntaxe, la fonction image() se comporte exactement comme la fonction plus connue url().

• background: image('chemin/fichier.png', green);

  Ici une couleur de remplacement a été précisée : si le fichier image n'est pas trouvé, ou si son format n'est pas reconnu par le navigateur, ce sera la couleur de remplacement qui sera utilisée à la place. La couleur peut être spécifiée dans toutes les syntaxes reconnues par CSS (voir Les couleurs).

  Il faut noter que dans le cas particulier de la propriété background, cette syntaxe n'apporte pas grand chose puisque une couleur de remplacement peut déjà être définie dans la syntaxe de la propriété :

  background: url('chemin/fichier.png) green;

• background: image(ltr 'chemin/fichier.png');

  L'attribut ltr est associé à l'image. le navigateur le prend en compte et peut être amené à symétriser l'image pour s'adapter au sens d'écriture de l'élément.

  Les valeurs d'attribut possibles sont :

  1. ltr : de gauche à droite (Left To Right).
  2. rtl : de droite à gauche (Right to Left).
• background: image(ltr 'chemin/fichier.png#xywh=10,10,60,50');

  Ici un fragment d'image a été spécifié : seule cette partie de l'image sera utilisée.

Simulateur avec la fonction image()

Prise en charge par les navigateurs (compatibilité).

La fonction image() n'est pour l'instant traitée par aucun navigateur (2024).

1

Fonction
image()

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

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

• Module CSS - Images et contenu remplacé

  Introduction de la fonction image().
  

  11 Septembre 2012

  Document de travail.

  

  

  

Concernant les manipulations d'images, voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction image() est décrite dans la spécification CSS Images Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :