CSS - Fonction url()

Description de la fonction url().

La fonction url() permet de spécifier l'adresse d'une ressource externe, telle qu'une image, un son, une police de caractères, etc.

Fragments d'image.

Lorsque le fichier désigné par url() est une image, la syntaxe prévoit qu'il soit possible de ne récupérer qu'une partie de cette image.

Attention ! Peu de navigateurs prennent en charge la fonctionnalité de traiter un fragment d'image.

La fonction url() peut être utilisée avec :

• @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
• @import : Importation d'une feuille de styles.
• 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 url().

• <propriété>: url('chemin/fichier');

  u est l'adresse d'une ressource externe. Si cette dernière comporte des espaces, il sera nécessaire de l'insérer entre des apostrophes ou des guillemets.

  Voici des syntaxes valides :
    url(img/logo.png)
  url('img/petit logo.png')
  url("img/petit logo.png")

  L'adresse u peut être relative ou absolue.

  1. url(img/logo.png) est une adresse relative, évaluée par rapport à l'emplacement de la feuille de styles.
  2. url(http://domaine/img/logo.png) est une adresse absolue pouvant désigner une ressource disponible éventuellement sur un autre domaine.
  3. url(/img/logo.png) est une adresse absolue par rapport à la racine du site courant.
• <propriété>: url('chemin/fichier.png#xywh=100,100,300,200'); x y l h

  Lorsque la fonction url() est utilisée pour désigner une image, il est possible de ne récupérer qu'une partie seulement de cette image.

  La paramètre xywh (abréviation pour x, y, width, height) est traité comme un signet désignant une partie de l'image. Quatre nombres sont à indiquer, séparés par des virgules. Ces nombres correspondent par défaut à des pixels.

  Attention à l'absence d'unités, et au signe égal, inhabituels en CSS.

  1. x et y sont les coordonnées du point en haut à gauche de la zone à traiter.
  2. w et h sont respectivement la largeur et la hauteur de la zone à traiter.
• <propriété>: url('chemin/fichier' m);

  Le paramètre m est présenté comme un "url-modifer" mais curieusement aucune définition plus précise n'existe dans la norme.

Exemples.

Cliquez sur les exemples pour afficher leur code CSS.