Image() - Fonction CSS
Résumé des caractéristiques de la fonction image()
Schéma syntaxique de image().
Description des termes utilisés sur le schéma :
'url'est l'adresse d'un fichier image. La fonctionurl()peut également être utilisée.colorest une couleur de remplacement, spécifiée dans l'une des nombreuses syntaxes connues de CSS : voir les couleurs CSS.
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 fonction image() peut être utilisée avec :
background-image: Image d'arrière-plan.border-image-source: Définit l'image utilisée pour construire la bordure.list-style-image: Définit une image à utiliser à la place des puces.mask-image: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Syntaxe de la fonction image().
- background: image('chemin/fichier.png');
Dans cette première syntaxe, la fonction
image()se comporte exactement comme la fonction plus connueurl(). - 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 Object->link}).
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
ltrest 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 :
ltr: de gauche à droite (Left To Right).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.
Prise en charge par les navigateurs (compatibilité).
La fonction image() n'est pour l'instant traitée par aucun navigateur (2024).
image()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
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que image().
Les spécifications CSS éditées par le W3C sont organisées en modules. image() fait partie du module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.