CSS - Fonction image()
image()
est une fonction du langage CSS. Son principal rôle est de spécifier le chemin et
le nom d'un fichier image qui pourra être affiché sur une page web, mais la fonction offre beaucoup
de fonctionnalités complémentaires.
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()
.
- 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 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 :
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.
Page en cours de préparation
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.