Les couleurs et les arrière-plans
Voir la section sur les unités de couleur pour la syntaxe des valeurs de couleurs valides.
14.1 Couleur de premier plan. la propriété « color »
dépend de l'agent utilisateur
Cette propriété décrit la couleur de premier plan du contenu texte d'un élément. Il existe différentes façons de spécifier rouge:
14.2 L'arrière-plan
propriétés d'arrière-plan ne sont pas héritées, mais l'arrière-plan de la boîte de parent brillera à travers par défaut en raison de la valeur « transparente » initiale sur « background-color ».
L'arrière-plan de l'élément racine devient l'arrière-plan de la toile et couvre toute la toile. ancrée (pour « background-position ») au même point tel qu'il serait si elle a été peinte seulement pour l'élément racine elle-même. L'élément racine ne peint pas ce contexte nouveau.
Pour les documents HTML, cependant, nous recommandons que les auteurs précisent l'arrière-plan pour l'élément BODY plutôt que l'élément HTML. Pour les documents dont l'élément racine est un élément « HTML » HTML ou un élément XHTML « html » qui a calculé les valeurs de « transparent » pour « background-color » et « aucun » pour «background-image. les agents utilisateurs doivent plutôt utiliser la valeur calculée des propriétés d'arrière-plan du premier élément HTML « BODY » élément ou XHTML « corps » enfant de cet élément lors de milieux peinture pour la toile, et ne doit pas peindre un fond pour cet élément enfant. Ces fonds doivent être ancrés au même point comme ils le seraient si elles étaient peintes seulement pour l'élément racine.
Notez que la règle de l'élément BODY fonctionnera même si la balise BODY a été omis dans la source HTML depuis l'analyseur HTML déduire la balise manquante.
Arrière-plans des éléments qui forment un contexte d'empilement (voir la propriété « z-index ») sont peints au fond du contexte d'empilement de l'élément, au-dessous quelque chose dans ce contexte d'empilement.
14.2.1 propriétés d'arrière-plan. 'Couleur de fond'. 'image de fond'. 'Répétition du fond'. «Background-attachment. 'Background-position'. et « background »
URI ou pas absolue
Cette propriété définit l'image d'arrière-plan d'un élément. Lors de la définition d'une image d'arrière-plan, les auteurs doivent également spécifier une couleur d'arrière-plan qui sera utilisé lorsque l'image est indisponible. Lorsque l'image est disponible, il est rendu au-dessus de la couleur d'arrière-plan. (Ainsi, la couleur est visible dans les parties transparentes de l'image).
Les valeurs de cette propriété sont soit
dimensions Intrinsic exprimés en pourcentage doivent être résolus par rapport aux dimensions du rectangle qui établit le système de coordonnées de la propriété «background-position.
Si l'image comporte une ou l'autre une largeur intrinsèque ou une hauteur intrinsèque et un rapport d'aspect intrinsèque, la dimension manquante est calculée à partir de la dimension donnée et le rapport.
Si l'image comporte une ou l'autre une largeur intrinsèque ou une hauteur intrinsèque et aucun rapport d'aspect intrinsèque, la dimension manquante est supposée être la taille du rectangle qui définit le système de coordonnées pour la propriété « background-position ».
Si l'image ne comporte pas de dimensions intrinsèques et a un rapport intrinsèque les dimensions doivent être considérées comme les plus grandes dimensions à ce rapport tel que ni dimension supérieure aux dimensions du rectangle qui définit le système de coordonnées pour la propriété « background-position ».
Si l'image n'a pas de rapport intrinsèque non plus, alors les dimensions doivent être considérées comme le rectangle qui définit le système de coordonnées pour la propriété « background-position ».
répéter | repeat-x | repeat-y | no-repeat | hériter
Si une image d'arrière-plan est spécifiée, cette propriété indique si l'image est répétée (carrelage), et comment. La mosaïque couvre le contenu. rembourrage et les zones frontalières d'une boîte.
Les valeurs ont les significations suivantes:
répéter l'image est répétée horizontalement et verticalement. répéter-x L'image est répétée horizontalement seulement. repeat-y L'image est répétée verticalement uniquement. no-repeat L'image ne se répète pas: une seule copie de l'image est dessinée.
Une copie de l'image d'arrière-plan est centrée, et d'autres exemplaires sont mis au-dessus et au-dessous pour faire une bande verticale derrière l'élément.
Si une image d'arrière-plan est spécifiée, cette propriété spécifie si elle est fixe par rapport à la fenêtre ( « fixe ») ou défile avec le bloc contenant ( « scroll »).
Notez qu'il n'y a qu'une seule fenêtre par vue. Si un élément a un mécanisme de défilement (voir « débordement »), un arrière-plan « fixe » ne se déplace pas avec l'élément, et un « scroll » arrière-plan ne se déplace pas avec le mécanisme de défilement.
Dans paginée les médias, où il n'y a pas viewport, un arrière-plan « fixe » est fixe par rapport à la boîte de page et est donc reproduit sur chaque page.
Cet exemple crée une bande verticale infinie qui reste « collé » à la fenêtre lorsque l'élément est défilée.
Voir la section sur la conformité pour plus de détails.
reportez-vous à la taille de la boîte elle-même
pour
Si une image d'arrière-plan a été spécifié, cette propriété indique sa position initiale. Si une seule valeur est spécifiée, la deuxième valeur est supposée être « centre ». Si au moins une valeur est un mot-clé, la première valeur représente la position horizontale et la seconde représente la position verticale. Négatif
Cependant, la position est non défini dans CSS 2.1 si l'image a un rapport intrinsèque, mais pas de taille intrinsèque.
Si l'image de fond est fixée à l'intérieur de la fenêtre (voir la propriété « background-attachment »), l'image est placée par rapport à la fenêtre à la place de la boîte de remplissage de l'élément. Par exemple,
Dans l'exemple ci-dessus, le (seul) image est placée dans le coin inférieur droit de la fenêtre.