CSS - Fonction image()

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 : L'image utilisée pour construire la bordure.
• list-style-image : Définit une image à utiliser à la place des puces.
• mask-image : Image ou le fichier SVG qui sera utilisé comme masque

Syntaxe de la fonction image().

Page en cours de préparation

• 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 couleurs CSS}).

  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.

Voir aussi...

Images et filtres - Propriétés.

• backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
• background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
• clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
• filter : Filtre graphique.
• image-rendering : Mode de mise à l'échelle des images.
• mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

• blur() : Applique un effet de flou à une image.
• brightness() : Ajuste la luminosité d'une image.
• contrast() : Ajuste le contraste d'une image.
• drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
• grayscale() : Convertit une image en nuances de gris (noir et blanc).
• hue-rotate() : Change les couleurs d'une image (rotation des teintes).
• inset() : Définit un rectangle, utilisable pour découper une image.
• invert() : Inverse les couleurs d'une image.
• opacity() : Détermine le degré de transparence d'un élément.
• saturate() : Définit la saturation des couleurs d'une image.
• sepia() : Applique un effet sépia à une image.