Spécifications CSS


14 Les couleurs et les arrière-plans

Les propriétés CSS permettent aux auteurs la spécification d'une couleur d'avant-plan et d'arrière-plan pour un élément. Pour l'arrière-plan, cela peut être une couleur ou une image. Les propriétés d'arrière-plan autorisent le positionnement et la répétition d'une image de fond, si celle-ci doit rester fixe, par rapport à la zone de visualisation, ou bien, si elle doit défiler en même temps que le document.

Voir le passage sur les unités de couleur pour une syntaxe correcte des valeurs de couleur.

14.1 La couleur d'avant-plan : la propriété 'color'

'color'
Valeur :  <couleur> | inherit
Initiale :  selon l'agent utilisateur
S'applique à :  tous les éléments
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété décrit la couleur d'avant-plan du contenu de texte d'un élément. Voici plusieurs façons d'indiquer la couleur rouge :

Exemple(s) :

EM { color: red }              /* nom de couleur prédéfini */
EM { color: rgb(255,0,0) }     /* couleurs en RGB allant de 0 à 255 */

14.2 L'arrière-plan

Les auteurs peuvent sp√©cifier l'arri√®re-plan d'un √©l√©ment (c.√†.d. la surface o√Ļ celui est rendu) comme √©tant une couleur ou bien une image. Selon le mod√®le de la bo√ģte, l'arri√®re-plan correspond aux aires de contenu et, d'espacement et de bordure. Les couleurs et styles de bordure sont sp√©cifi√©es par les propri√©t√©s de bordure. Les marges √©tant transparentes, l'arri√®re-plan du parent est toujours visible au travers de celles-ci.

Bien que les propri√©t√©s d'arri√®re-plan ne s'h√©ritent pas, l'arri√®re-plan de la bo√ģte du parent transpara√ģtra par d√©faut, du fait de la valeur initiale 'transparent' de la propri√©t√© 'background-color'.

L'arri√®re-plan de la bo√ģte g√©n√©r√©e par l'√©l√©ment racine recouvre la totalit√© du canevas.

Dans le cas de documents HTML, on recommande aux auteurs de sp√©cifier un arri√®re-plan √† l'√©l√©ment BODY, plut√īt qu'√† l'√©l√©ment HTML. Les agents utilisateurs devraient suivre les r√®gles de pr√©s√©ance suivantes pour remplir le fond du canevas¬†: quand la valeur de la propri√©t√© 'background' pour l'√©l√©ment HTML diff√®re de 'transparent', alors utiliser la valeur sp√©cifi√©e, autrement utiliser celle sp√©cifi√©e par la propri√©t√© 'background' de l'√©l√©ment BODY. Le rendu n'est pas d√©fini si la valeur finale reste 'transparent'.

Selon ces règles, le canevas en dessous du document HTML suivant aura un arrière-plan "marbré" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Donner un arrière-plan au canevas</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marbre.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Mon arrière-plan est marbré.
  </BODY>
</HTML>

14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'

'background-color'
Valeur :  <couleur> | transparent | inherit
Initiale:  transparent
S'applique à :  tous les éléments
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Cette propriété donne la couleur d'arrière-plan d'un élément, avec une valeur de <couleur>, ou bien avec le mot-clé 'transparent', celui-ci laissant éventuellement voir les couleurs situées plus en-dessous.

Exemple(s) :

H1 { background-color: #F00 }
'background-image'
Valeur :  <uri> | none | inherit
Initiale :  none
S'applique à :  tous les éléments
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Cette propriété spécifie l'image d'arrière-plan d'un élément. En même temps qu'une image, les auteurs devraient aussi spécifier une couleur d'arrière-plan, cette couleur étant employée en remplacement d'une image indisponible. Celle-ci, une fois disponible, vient se superposer sur le fond coloré. La couleur du fond étant ainsi visible au travers des zones transparentes de l'image.

La propriété admet les valeurs d'<uri>, pointant vers une image, ou 'none', prohibant l'emploi d'image.

Exemple(s) :

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
Valeur :  repeat | repeat-x | repeat-y | no-repeat | inherit
Initiale :  repeat
S'applique à :  tous les éléments
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Quand on sp√©cifie une image d'arri√®re-plan, cette propri√©t√© indique si l'image est r√©p√©t√©e (appos√©e) et la mani√®re de la r√©p√©tition. La mosa√Įque de fond r√©sultante correspond aux aires de contenu et, d'espacement et de bordure de la bo√ģte de l'√©l√©ment en question. Les significations des valeurs sont¬†:

repeat
L'image se répète à la fois horizontalement et verticalement ;
repeat-x
L'image ne se répète qu'horizontalement ;
repeat-y
L'image ne se répète que verticalement ;
no-repeat
L'image ne se répète pas : un seul exemplaire de celle-ci est dessiné.

Exemple(s) :

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Une image de fond centrée, des copies de celle-ci se répétant en haut et en bas des aires d'espacement et de contenu.   [D]

Un exemplaire de l'image d'arrière-plan est placé au centre, puis d'autres exemplaires de celles-ci se placent les unes au-dessus, les autres en-dessous, produisant une bande verticale derrière l'élément.

'background-attachment'
Valeur :  scroll | fixed | inherit
Initiale :  scroll
S'applique à :  tous les éléments
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est fixe par rapport à la zone de visualisation (pour la valeur 'fixed'), ou si celle-ci défile en même temps que le document (pour la valeur 'scroll'). Noter qu'il n'existe qu'une seule zone de visualisation par document ; c.à.d., même si l'élément est doté d'un mécanisme de défilement (voir la propriété 'overflow'), un arrière-plan avec la valeur 'fixed' ne se déplace pas avec cet élément.

M√™me si l'image est fixe, celle-ci n'est visible que quand elle se trouve dans les aires d'arri√®re-plan ou, d'espacement ou de bordure de l'√©l√©ment. √Ä moins que l'image ne se r√©p√®te en mosa√Įque ('background-repeat: repeat'), celle-ci peut ainsi ne pas appara√ģtre.

Exemple(s) :

Dans cet exemple, une bande verticale infinie reste "collée" dans la zone de visualisation quand l'élément défile :

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Les agents utilisateurs peuvent considérer une valeur 'fixed' comme étant 'scroll'. Cependant, on recommande une interprétation correcte de la valeur 'fixed', au moins pour les éléments HTML et BODY, autrement il serait impossible pour un auteur de fournir une image destinée seulement aux navigateurs reconnaissant la valeur 'fixed'. Voir le passage sur la conformité pour des explications.

'background-position'
Valeur :  [ [<pourcentage > | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Initiale :  0% 0%
S'applique à :  ceux des éléments de type bloc et ceux remplacés
Héritée :  non
Pourcentage¬†:¬†¬†se rapporte √† la taille de la bo√ģte elle-m√™me
Médias :  visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique la position initiale de celle-ci. Les significations des valeurs sont :

<pourcentage> <pourcentage>
Pour la paire de valeurs '0% 0%', le coin en haut et √† gauche de l'image est align√© sur celui du bord de l'espacement de la bo√ģte. Pour la paire de valeurs '100% 100%', c'est le coin en bas et √† droite de l'image sur celui du bord de l'espacement de la bo√ģte. Pour la paire de valeurs '14% 84%', le point dans l'image, situ√© 14¬†% vers la droite et 84¬†% vers le bas, se place sur celui contenu dans l'aire d'espacement de la bo√ģte, dans les m√™mes proportions¬†;
<longueur> <longueur>
Pour la paire de valeur '2cm 2cm', le coin en haut et √† gauche de l'image se place sur le point, situ√© √† 2¬†cm vers la droite et 2¬†cm vers le bas en partant du coin en haut et √† gauche de l'aire d'espacement de la bo√ģte¬†;
top left et left top
Identique à '0% 0%' ;
top, top center et center top
Identique à '50% 0%';
right top et top right
Identique à '100% 0%' ;
left, left center et center left
Identique à '0% 50%' ;
center et center center
Identique à '50% 50%' ;
right, right center et center right
Identique à '100% 50%' ;
bottom left et left bottom
Identique à '0% 100%' ;
bottom, bottom center et center bottom
Identique à '50% 100%' ;
bottom right et right bottom
Identique à '100% 100%'.

Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle-ci ne concerne que la position horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la première concerne la position horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm'). Les positions négatives le sont également. On ne peut pas combiner des mots-clés avec des valeurs de pourcentage ou de longueur (ce qui est possible est indiqué plus haut).

Exemple(s) :

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Quand l'image d'arrière-plan est fixe par rapport à la zone de visualisation (voir la propriété 'background-attachment'), cette image se place relativement à celui-ci, et non par rapport à l'aire d'espacement de l'élément. Par exemple :

Exemple(s) :

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} 

Ici, l'image (solitaire) est placée dans le coin en bas à droite de la zone de visualisation.

'background'
Valeur :  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Initiale :  non définie pour les propriétés raccourcies
S'applique à :  tous les éléments
Héritée :  non
Pourcentage :  admis pour la propriété 'background-position'
Médias :  visuel

La propriété 'background' est une propriété raccourcie qui sert à regrouper les propriétés individuelles 'background-color', 'background-image', 'background-repeat', 'background-attachment' et 'background-position' dans la feuille de style.

La propriété 'background' distribue d'abord à toutes les propriétés individuelles d'arrière-plan à leur valeur initiale, puis leur applique les valeurs explicites de la déclaration.

Exemple(s) :

Dans la première règle de l'exemple suivant, la valeur de la propriété 'background-color' est seule spécifiée, les autres propriétés individuelles recevant leur valeur initiale. Dans la seconde règle, toutes les valeurs des propriétés individuelles sont spécifiées :

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 La correction du gamma

Pour des explications concernant les questions soulevées par le gamma, consulter le tutoriel contenu dans la spécification PNG ([PNG10]).

Lors du calcul pour la correction du gamma, les agents utilisateurs, ceux affichant sur un écran cathodique, peuvent considérer un écran cathodique idéal et ignorer les effets du gamma apparent dus au dithering. Ceci implique, de leur part et selon les plates-formes actuelles, les corrections minimales suivantes :

PC sous MS-Windows
aucune ;
Unix sous X11
aucune ;
Macintosh sous QuickDraw
appliquer un gamma de 1.45 [ICC32] (celles des applications compatibles peuvent simplement passer le profil ICC sRGB à ColorSync pour effectuer la correction de couleur appropriée) ;
SGI sous X
appliquer la valeur de gamma trouvée à /etc/config/system.glGammaVal (la valeur par défaut étant 1.70 ; les applications tournant sur Irix 6.2, ou une version supérieure, peuvent simplement passer le profil ICC sRGB au système de gestion de couleur) ;
NeXT sous NeXTStep
appliquer un gamma de 2.22.

L'expression "appliquer un gamma" signifie que chacune des valeurs R, G et B doit être convertie en R'=Rgamma, G'=Ggamma et B'=Bgamma, avant leur transmission au système d'exploitation.

Ceci peut se faire très rapidement en construisant une table de référence de 256 valeurs, une seule fois au lancement du navigateur, ainsi :

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

ce qui évite des calculs compliqués pour chaque attribut de couleur et autrement faramineux au niveau de chaque pixel.

 

Document créé le 12/08/06 23:42, dernière modification le 04/04/18 12:13
Source du document imprimé : https://www.gaudry.be/css-rf-colors.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Références

  1. document html Langue du document: fr Traduction des normes CSS : http://www.yoyodesign.org/doc/w3c/css2/colors.html, yoyodesign
  2. document html Langue du document: fr Traduction des normes CSS : http://www.yoyodesign.org/doc/w3c/css2/cover.html, yoyodesign

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.