Contexte CSS. Guide complet. Arrière-plan en CSS (couleur, position, image, répétition, pièce jointe) - tout pour définir la couleur d'arrière-plan ou l'image d'arrière-plan des éléments Html Comment définir la couleur d'arrière-plan en css

Bonjour chers lecteurs du site du blog. Aujourd'hui, nous allons examiner cinq règles CSS qui vous permettent de définir un arrière-plan pour n'importe quel élément en HTML - background-position (image, répétition, couleur, pièce jointe). Eh bien, n'oublions pas de mentionner également la règle composée de l'arrière-plan.

Il n'y a rien de difficile à cela, mais il y a certaines subtilités et nuances que vous devez connaître et déjà modèle prêt à l'emploi(rappelez-vous, ce qui aidera à ouvrir tous les tenants et aboutissants de toute conception).

Permettez-moi de vous rappeler encore une fois que cet article fait partie d'une série et qu'il serait préférable de commencer à apprendre le balisage de style depuis le début, à savoir, avec un article sur ce qu'est le CSS et avec quoi il est mangé, eh bien, puis suivez l'ordre indiqué dans la référence. Bien que, dans tous les cas, cela dépend de vous, mais parlons maintenant de la définition de l'arrière-plan.

Couleur, couleur de fond et image de fond

Voyons d'abord comment couleur htmléléments utilisant Règles de couleur CSS... En fait, tout est simple ici. La syntaxe est tout à fait normale et vous pouvez définir la couleur en fonction de la manière dont cela a été fait dans le langage de balisage hypertexte. Comme vous vous en souvenez, placé après le signe dièse (dièse - "# fe35a3"), ou en utilisant trois chiffres, si le premier correspond à la valeur du deuxième, le troisième avec le quatrième, bien et le cinquième, respectivement, avec le sixième (le code couleur "# aa33ff" peut être abrégé en "a3f").

De plus, les couleurs dans le code Html et Css peuvent être représentées sous forme de mots (par exemple, "rouge"), mais le code hexadécimal est le plus souvent utilisé :

Couleur : # 303

A titre d'exemple, j'ai colorié ce petit paragraphe de la même couleur que ci-dessus (#303). Maintenant, il est légèrement différent de la couleur de tous les autres paragraphes (plus sombre), qui est définie comme # 555 dans le fichier CSS du thème WordPress que j'utilise. Mais régler la couleur par la couleur est assez simple, mais avec le fond ce sera un peu plus compliqué.

Donc, pour le fond en css il y a cinq règles qui, si vous le souhaitez, peuvent être combinées en une seule équipe. Pour les voir, vous pouvez aller sur la page de la spécification actuelle du consortium W3C et y rechercher n'importe quoi avec le mot Background :

1. couleur d'arrière-plan - cette règle définit la couleur d'arrière-plan de tout élément HTML. Dans celui-ci, vous pouvez utiliser soit le code, soit le nom de la teinte, c'est-à-dire tout est exactement comme lors de l'utilisation de la couleur.

image d'arrière-plan - avec elle, vous pouvez utiliser une image comme arrière-plan (mais assurez-vous de lire à ce sujet, car les images lourdes ralentiront le chargement de la page), dont le chemin d'accès sera spécifié dans la fonctionnalité url ().

Si vous regardez les spécifications, vous verrez que couleur de fond par défaut tout élément aura transparent (la valeur par défaut de la règle est "background-color: transparent"). Cependant, dans les éléments, il sera non transparent par défaut, car ce sont des éléments du système et ils ont tout différemment et différent des balises habituelles du langage de balisage hypertexte.

La couleur de background-color est définie par défaut (six ou trois chiffres d'un code hexadécimal, ou d'un mot) :

Couleur de fond : #FEFCDE

Par exemple, l'arrière-plan de ce paragraphe est défini précisément par le biais de la couleur d'arrière-plan avec le code de couleur donné juste au-dessus.

Les quatre autres règles CSS s'appliqueront uniquement à l'image d'arrière-plan, qui peut être définie pour n'importe quel élément HTML et, si vous le souhaitez, peut être positionnée avec précision. Le fichier graphique qui sera utilisé peut être défini en utilisant image de fond.

Si vous regardez la spécification du langage de balisage de style, vous verrez que l'image d'arrière-plan par défaut est "aucun" (c'est-à-dire qu'aucune image d'arrière-plan n'est utilisée). Eh bien, si vous en avez toujours besoin, alors dans la fonction url (), vous devez spécifier le chemin d'accès :

Image de fond : url (https : //site/image/comment_top_focus.gif);

Par exemple, pour ce paragraphe j'ai utilisé un fichier graphique avec un fond dont le chemin est décrit juste au dessus. Vous pouvez voir que toute la zone allouée à ce paragraphe est recouverte d'une image répétée, qui dans l'original ressemble à ceci :

Celles. lorsque vous utilisez une seule règle d'image de fond indiquant le chemin d'accès au fichier graphique, cette même image sera multipliée à la fois verticalement et horizontalement jusqu'à ce qu'elle couvre toute la zone allouée sur la page Web pour cet élément HTML particulier (dans notre exemple, il s'agissait d'un paragraphe). Pourquoi ça arrive ?

Background-repeat - répéter l'image de fond

Oui, car nous n'avons écrit aucune valeur pour la règle CSS. Répétition du fond, ce qui signifie que la valeur par défaut sera utilisée pour cela. En regardant la spécification, nous découvrons que cette valeur correspond à "répéter" (répéter l'image le long de tous les axes). La réponse est venue d'elle-même.

Par conséquent, avec la répétition d'arrière-plan, nous pouvons gérer les répétitions de l'image de fond... Cette règle ne peut avoir que quatre valeurs :




Background-position - positionnement de l'arrière-plan

Maintenant, la question se pose, est-il possible d'éloigner l'image de fond du coin supérieur gauche de la zone limitant la taille de l'élément. Bien sûr, vous pouvez, et à cet effet, il existe une règle distincte position-arrière-plan:



En regardant la spécification CSS, il devient clair pourquoi l'image d'arrière-plan par défaut est nichée exactement au bord supérieur gauche de la zone de l'élément Html. Parce que la valeur "0% 0%" est la valeur par défaut pour la règle de position d'arrière-plan.

Eh bien, lorsque cette règle n'est pas explicitement définie pour un élément (comme dans notre cas), alors le navigateur sélectionne sa valeur qui est acceptée dans la spécification par défaut (notez que les axes de coordonnées dans CSS sont signalés juste à partir du bord supérieur gauche de l'élément de zone).

Il ressort également de la spécification que des valeurs relatives (pourcentage) et absolues (par exemple) peuvent être utilisées pour positionner l'image d'arrière-plan à l'aide de background-position. Eh bien, vous pouvez également utiliser des mots qui correspondront à certaines valeurs numériques. Mais tout d'abord.

Lors du réglage du positionnement de l'image d'arrière-plan en utilisant des unités absolues dans la position d'arrière-plan, le principe suivant de détermination de sa position finale a lieu :

Celles. le navigateur calculera les décalages spécifiés le long des axes X et Y de l'origine de la zone dans laquelle l'objet est positionné à l'origine de cette image même. Par exemple, dans ce paragraphe, j'ai positionné l'image d'arrière-plan en termes de position d'arrière-plan en utilisant les règles CSS suivantes :

Image de fond : URL (https : //site/image/logo.png); background-repeat : pas de répétition ; position d'arrière-plan : 400px 25px ;

Veuillez noter que dans ce cas, il sera aligné au centre de la fenêtre et non au centre de la zone allouée pour ces paragraphes. Il est clair qu'en réalité un tel agencement de l'image de fond est peu susceptible de trouver une application.

Cependant, si vous définissez une position d'arrière-plan fixe pour des éléments tels que Body ou Html (c'est-à-dire dans les balises qui couvrent l'intégralité de la page Web), cette image sera toujours visible dans la fenêtre d'affichage et c'est exactement l'utilisation de l'attachement d'arrière-plan Propriété CSS dans une disposition de bloc moderne.

Y a-t-il d'autres règle préfabriquée Contexte, qui vous permet de combiner les cinq règles décrites ci-dessus dans une seule bouteille. De plus, les valeurs pour les cinq dans la version préfabriquée peuvent être utilisées dans n'importe quel ordre et dans n'importe quelle quantité (elles sont uniques et le navigateur ne les confondra pas les unes avec les autres). Tout ce que vous ne spécifiez pas explicitement, le navigateur considérera égal à la valeur par défaut.

PNG) sans répétition 50 % ;

La règle d'assemblage montrée dans l'exemple est appliquée à ce paragraphe pour plus de clarté. Cela s'est avéré pas beau, mais ce n'est pas l'essentiel. Pour ce paragraphe, un étrange remplissage de fond jaune est utilisé, ainsi qu'une image du logo LiveInternet, alignée au centre du paragraphe. Parce que aucune valeur n'est spécifiée pour la règle d'attachement d'arrière-plan, la valeur de défilement par défaut est utilisée.

Si, pour un élément, vous souhaitez définir uniquement un remplissage avec une couleur et ne vous embêtez pas avec l'image d'arrière-plan, vous pouvez bien au lieu de :

Couleur de fond : #FEFCDE

écrivez:

Contexte : #FEFCDE

Pour toutes les autres valeurs de la règle combinée sera prise par défaut, et c'est ce dont vous aviez besoin.

Bonne chance à toi! A bientôt sur les pages du site du blog

Vous pouvez être intéressé

Style de liste (type, image, position) - Règles CSS pour personnaliser l'apparence des listes en code Html Comment configurer la couleur d'arrière-plan alternée des lignes de tableaux, de listes et d'autres éléments HTML sur un site à l'aide de la pseudo-classe nth-child
Position (absolue, relative et fixe) - voies positionnement htmléléments en CSS (règles gauche, droite, haut et bas)
Flotter et effacer dans CSS - outils de mise en page de bloc
Positionnement avec Z-index et règle CSS Cursor pour changer le curseur de la souris
Remplissage, marge et bordure - nous définissons des marges internes et externes en CSS, ainsi que des bordures pour tous les côtés (haut, bas, gauche, droite)
Affichage (bloc, aucun, en ligne) en CSS - définit le type d'affichage des éléments Html sur la page Web
Priorités CSS et renforcement avec les styles importants, combinaison et regroupement de sélecteurs, personnalisés et auteurs
CSS - qu'est-ce que c'est, comment les feuilles de style en cascade sont liées à Code HTML en utilisant le style et le lien
Tag, class, Id et sélecteurs génériques, ainsi que des sélecteurs d'attributs en CSS moderne

De l'auteur : Je souhaite la bienvenue à tout le monde. Les couleurs et les images d'arrière-plan jouent un rôle important dans la conception de sites Web, car elles permettent à n'importe quel élément d'être présenté de manière plus attrayante. Aujourd'hui, nous allons voir comment créer un fond d'écran en html.

Est-il possible de s'en sortir avec html lors de la définition de l'arrière-plan ?

Je te dis tout de suite que non. Généralement, le HTML n'est pas conçu pour styliser les pages Web. C'est juste très gênant. Par exemple, il existe un attribut bgcolor avec lequel vous pouvez définir la couleur d'arrière-plan, mais c'est très gênant.

En conséquence, nous utiliserons des feuilles de style en cascade (css). Il existe de nombreuses autres options pour définir l'arrière-plan. Aujourd'hui, nous allons analyser les plus élémentaires.

Comment définir l'arrière-plan via css ?

Donc, tout d'abord, vous devez décider de l'élément dont vous avez besoin pour définir l'arrière-plan. C'est-à-dire que nous devons trouver le sélecteur sur lequel nous allons écrire la règle. Par exemple, si l'arrière-plan doit être défini pour toute la page dans son ensemble, vous pouvez le faire via le sélecteur de corps, pour tous les blocs - via le sélecteur div. Eh bien, etc L'arrière-plan peut et doit être lié à n'importe quel autre sélecteur : classes de style, identifiants, etc.

Après avoir choisi le sélecteur, vous devez écrire le nom de la propriété elle-même. Pour définir la couleur d'arrière-plan (juste une couleur unie, pas un dégradé ou une image), utilisez la propriété background-color. Après cela, vous devez mettre deux points et écrire la couleur elle-même. Cela peut se faire de différentes façons. Par exemple, en utilisant des mots-clés, un code hexadécimal, des formats rgb, rgba, hsl. N'importe quelle méthode fera l'affaire.

La méthode la plus couramment utilisée est le code hexadécimal. Pour sélectionner les couleurs, vous pouvez utiliser un programme dans lequel le code couleur est visible. Par exemple Photoshop, Paint ou un outil en ligne. En conséquence, par exemple, j'écrirai un contexte général pour l'ensemble de la page Web.

corps (couleur de fond : # D4E6B3 ;)

Ce code doit être inséré dans la section head. Il est important que les fichiers soient dans le même dossier.

Image comme arrière-plan

Je vais utiliser une petite icône de langage html comme image :

Créons un bloc vide avec un identifiant :

Donnons-lui des dimensions et un arrière-plan explicites :

#bg (largeur : 400 pixels ; hauteur : 250 pixels ; image d'arrière-plan : url (html.png );)

À partir de ce code, vous pouvez voir que j'ai utilisé une nouvelle propriété - background-image. Il est conçu uniquement pour insérer une image comme arrière-plan pour un élément html. Voyons ce qui se passe:

Pour définir une image, vous devez écrire après les deux points mot-clé url, puis, entre parenthèses, spécifiez le chemin d'accès au fichier. Dans ce cas, le chemin est spécifié en fonction du fait que l'image se trouve dans le même dossier que le document html. Vous devez également spécifier le rapport hauteur/largeur.

Si vous avez fait cela et que l'arrière-plan n'apparaît toujours pas dans le bloc, vérifiez à nouveau si vous avez correctement écrit le nom de l'image, si le chemin et l'extension ont été correctement spécifiés. Ce sont les plus raisons courantes le fait que l'arrière-plan n'est tout simplement pas affiché, car le navigateur ne peut pas trouver l'image.

Mais avez-vous remarqué une particularité ? Le navigateur a pris et reproduit l'image tout au long du bloc. Donc, pour que vous le sachiez, c'est le comportement par défaut des images d'arrière-plan - elles se répètent verticalement et horizontalement jusqu'à ce qu'elles puissent tenir dans le bloc. Vous pouvez facilement contrôler ce comportement. Pour ce faire, utilisez la propriété background-repeat, qui a 4 valeurs principales :

Répéter - valeur par défaut, l'image est répétée des deux côtés ;

Répéter-x - ne se répète que pour ois x ;

Répéter-y - répète uniquement le long de l'axe des y ;

Pas de répétition - ne se répète pas du tout ;

Vous pouvez écrire chaque valeur et voir ce qui se passe. Je vais l'écrire comme ceci :

background-repeat : répéter-x ;

Répétez maintenant uniquement horizontalement. Si vous écrivez sans répétition, il n'y aura qu'une seule image.

Génial, cela peut déjà être fait, car cela capacités de base travailler avec l'arrière-plan, mais je vais vous montrer 2 autres propriétés qui vous permettent d'avoir plus de contrôle dessus.

Avec la répétition, les concepteurs de mise en page avaient l'habitude d'obtenir des textures et des dégradés d'arrière-plan à l'aide d'une seule petite image. Il aurait pu être de 30 pixels sur 10 pixels ou moins. Peut-être un peu plus. L'image était telle que lorsqu'elle était répétée sur un ou même sur les deux côtés, aucune transition n'était visible, de sorte qu'en conséquence, un seul fond solide a été obtenu. Soit dit en passant, cette approche vaut la peine d'être utilisée maintenant si vous souhaitez utiliser une texture transparente sur votre site comme arrière-plan. Aujourd'hui, le gradient peut déjà être implémenté à l'aide de méthodes css3, nous en reparlerons certainement.

Position d'arrière-plan

Par défaut, l'image d'arrière-plan, si elle n'est pas définie pour se répéter, sera dans le coin supérieur gauche de son bloc. Mais la position peut être facilement modifiée en utilisant la propriété background-position.

Vous pouvez le demander de différentes manières. L'une des options consiste simplement à indiquer les côtés dans lesquels l'image doit être située :

position d'arrière-plan : en haut à droite ;

C'est-à-dire que verticalement, tout est resté le même: l'image de fond est située en haut, mais horizontalement, nous avons changé le côté à droite, c'est-à-dire à droite. Une autre façon de définir la position est un pourcentage. Dans ce cas, le compte à rebours commence dans tous les cas à partir du coin supérieur gauche. 100% - tout le bloc. Ainsi, pour placer l'image exactement au centre, nous écrivons comme ceci :

position d'arrière-plan : 50 % 50 % ;

N'oubliez pas une chose importante liée au positionnement - le premier paramètre est toujours la position horizontale et le second est la position verticale. Donc, si vous voyez une valeur de 80% 20%, alors vous pouvez immédiatement conclure que l'image d'arrière-plan sera fortement décalée vers la droite, mais elle ne descendra pas beaucoup.

Et enfin, vous pouvez écrire la position en pixels. Tout est pareil, seul px sera utilisé à la place de%. Dans certains cas, ce positionnement peut également être nécessaire.

Notation abrégée

Convenez que le code s'avère plutôt lourd si tout est défini comme nous l'avons fait. Il s'avère que le chemin vers l'image doit être défini, ainsi que la répétition et la position. Bien sûr, la répétition et la position ne sont pas toujours nécessaires, mais dans tous les cas, il est plus correct d'utiliser la notation de propriété abrégée. Cela ressemble à ceci :

arrière-plan : # 333 URL (bg.jpg) sans répétition 50% 50% ;

C'est-à-dire que la première étape consiste à enregistrer la couleur d'arrière-plan unie globale, si nécessaire. Puis le chemin vers l'image, la répétition et la position. Si un paramètre n'est pas nécessaire, nous l'omettons simplement. D'accord, c'est beaucoup plus rapide et plus pratique, et nous réduisons également considérablement notre code. De manière générale, je vous conseille de toujours écrire en abréviations, même si vous n'avez qu'à indiquer une couleur ou une image.

Contrôler la taille de l'image d'arrière-plan

Notre image actuelle n'est pas bien adaptée pour le prochain tour, alors j'en prendrai un autre. En taille, laissez-le être comme un bloc ou plus grand que lui. Alors, imaginez que vous êtes confronté à une tâche : faire une image de fond pour qu'elle ne remplisse pas complètement son bloc. Et l'image, par exemple, est encore plus grande que la taille du bloc.

Que pouvez-vous faire dans ce cas ? Bien sûr, l'option la plus simple et la plus raisonnable serait de simplement réduire l'image, mais ce n'est pas toujours possible de le faire. Disons qu'il se trouve sur le serveur et dans ce moment il n'y a ni le temps ni la possibilité de le réduire. Le problème peut être résolu en utilisant la propriété background-size, qui peut être qualifiée de relativement nouvelle et qui vous permet de manipuler la taille de l'image d'arrière-plan, voire de n'importe quel arrière-plan.

Donc, mon image prend maintenant tout l'espace dans le bloc, mais je vais lui donner une taille d'arrière-plan :

taille de l'arrière-plan : 80 % 50 % ;

Encore une fois, le premier paramètre est la taille horizontale, le second - la taille verticale. Nous pouvons voir que tout a été appliqué correctement - la photo est devenue 80% de la largeur du bloc en largeur et la moitié en hauteur. Ici, vous avez juste besoin d'apporter une précision - en définissant la taille en pourcentage, vous pouvez affecter les proportions de l'image. Attention donc à ne pas sortir de proportion.

Comme vous pouvez le deviner, la taille de l'arrière-plan peut également être spécifiée en pixels. Il existe également deux mots-clés de signification qui peuvent également être utilisés :

Couverture - l'image sera mise à l'échelle de manière à ce qu'au moins un côté remplisse complètement le bloc.

Contenir - la met à l'échelle pour que l'image s'intègre complètement dans le bloc à sa taille maximale.

L'avantage de ces valeurs est qu'elles ne modifient pas le rapport hauteur/largeur de l'image, les laissant inchangées.

En outre, vous devez comprendre que l'étirement de l'image peut entraîner une détérioration de sa qualité. Je peux donner un exemple de la vie et de la pratique réelle des maquettistes. Tout le monde sait et comprend que lors du codage pour les ordinateurs de bureau, vous devez adapter le site aux principales largeurs de moniteurs : 1280, 1366, 1920. Si vous prenez une image d'arrière-plan d'une taille de, disons, 1280x200, et ne la définissez pas background-size, alors les écrans avec une largeur sont plus grands, un espace vide apparaîtra, l'image ne remplira pas complètement la largeur.

Dans 99% des cas, cela ne convient pas au développeur web, il définit donc background-size: cover pour que l'image s'étende toujours à la largeur maximale de la fenêtre. C'est une bonne astuce à utiliser, mais vous rencontrez maintenant le problème que les utilisateurs avec une largeur d'écran de 1920 pixels peuvent voir une image de qualité sous-optimale.

Permettez-moi de vous rappeler qu'il s'étirera à la largeur maximale. En conséquence, la qualité se détériorera automatiquement. Seul la bonne décision il utilisera initialement une image plus grande - 1920 pixels de large. Ensuite, sur les écrans les plus larges, elle sera dans sa taille naturelle, et sur d'autres, elle sera simplement coupée lentement, mais en même temps, avec la bonne sélection de l'image de fond, sur apparence le site ne sera pas affecté.

En général, il ne s'agit que d'un exemple d'utilisation des connaissances que vous avez acquises dans cet article lors de la création de mises en page réelles.

Fond semi transparent avec css

Une autre astuce qui peut être mise en œuvre avec en utilisant css – fond translucide... C'est-à-dire qu'à travers ce fond, il sera possible de voir ce qu'il y a derrière.

À titre d'exemple, je vais définir la page entière comme arrière-plan avec l'image que nous avons utilisée plus tôt dans les exemples. Pour le bloc avec l'identifiant bg, sur lequel nous réalisons toutes nos expérimentations, nous allons définir le fond en utilisant le format de couleur rgba.

Comme je l'ai dit plus tôt, il existe de nombreux formats en css pour définir les couleurs. L'un d'eux est le rgb, un format assez connu pour ceux qui travaillent dans éditeurs graphiques... Il s'écrit ainsi : rgb (17, 255, 34) ;

La première valeur entre parenthèses est la saturation du rouge, puis du vert, puis du bleu. La valeur peut être numérique de 0 à 255. En conséquence, le format rgba n'est pas différent, un seul paramètre supplémentaire est ajouté - le canal alpha. La valeur peut être comprise entre 0 et 1, où 0 correspond à une transparence totale.

brève information

versions CSS

Les valeurs

HTML5 CSS2.1 IE Cr Op Sa Fx

Modèle d'objet

document.getElementById ("elementID") .style.backgroundImage

Navigateurs

Internet Explorer jusqu'à et y compris 7.0 applique un arrière-plan à l'intérieur de la bordure d'un élément dont la propriété hasLayout est définie. Si un élément n'a pas de hasLayout, la propriété background-image respectera les bordures de l'élément comme spécifié dans la spécification. La différence d'affichage sera perceptible si les bordures sont en pointillés ou en pointillés plutôt que solides.

Si l'élément est défini sur défilement ou auto, Internet Explorer 8 aura un délai vertical d'un pixel lorsque l'arrière-plan défile.

Internet Explorer jusqu'à et y compris la version 7.0 ne prend pas en charge la valeur d'héritage.

Si l'arrière-plan est défini pour une ligne de tableau (balise ), puis Chrome, Safari, iOS ne l'affichent pas comme le prescrit le cahier des charges, à savoir pour chaque cellule séparément. Alors que le navigateur doit afficher un arrière-plan uni pour toute la ligne. L'exemple 2 montre le code pour illustrer l'erreur.

HTML5 CSS2.1 IE Cr Op Sa Fx

Résultat cet exemple v Navigateur Chrome montré dans la fig. 1. navigateur Internet Explorer, Opera et Firefox affichent correctement le fond de la ligne (Fig. 2).

Riz. 1. Répéter l'arrière-plan pour chaque cellule

Riz. 2. Contexte de toute la ligne

Je pense qu'il n'y a pas un seul site où la propriété n'est pas utilisée Contexte CSS... Il semblerait que quoi de plus simple que cette propriété ? Mais non, ses capacités sont bien plus larges que le but habituel d'une image ou d'une couleur comme arrière-plan de la page. Quelque chose sera familier, mais quelque chose deviendra sûrement une nouveauté pour beaucoup. Dans tous les cas, il sera utile de bien connaître le fonctionnement du background.

CSS3 a apporté beaucoup de nouvelles choses à la propriété, c'est la transparence et l'attribution de plusieurs images en arrière-plan, mais nous en parlerons ci-dessous, et d'abord, nous examinerons les bases de la propriété. Contexte.

Couleur de l'arrière plan

Je suis presque sûr que vous avez fait des affectations de couleurs d'arrière-plan un certain nombre de fois. Cela peut être fait en utilisant plusieurs types de notation : régulière (le nom de la couleur est utilisé), hexadécimale ou RVB. Chaque type est égal, utilisez celui que vous préférez. J'essaie d'utiliser la version la plus courte, et pour des raisons de perception, c'est plus simple et le fichier de style est un peu plus petit.

P (couleur de fond : rouge ;) p (couleur de fond : # f00 ;) p (couleur de fond : # ff0000 ;) p (couleur de fond : rgb (255, 0, 0 ;))

Il existe un support de transparence dans CSS3, vous pouvez donc l'ajouter à notre couleur, par exemple :

P (couleur d'arrière-plan : rgba (255, 0, 0, 0,5 );)

Le dernier chiffre a été défini sur 50 % de transparence. Vous pouvez définir la valeur de transparence de 0 (fond complètement transparent) à 1 (complètement opaque).

image de fond

Cette propriété est aussi très souvent utilisée, elle permet d'affecter une image au fond. CSS3 ajoute la possibilité d'attribuer plusieurs images à l'arrière-plan, chacune créant une sorte de calque, de sorte que chaque suivante se superpose à la précédente. Pourquoi cela pourrait-il être utile ? Tout est assez simple - disons que vous devez attacher les petites choses dans chaque coin du site. Pourvu que la mise en page soit plus ou moins fluide, l'utilisation d'une seule image n'est pas une option. Par conséquent, nous faisons 4 "calques", nous déplaçons chaque image dans son propre coin et le tour est joué, le problème est résolu

Corps (image d'arrière-plan : url ("image1"), url ("image2"), url ("image3"))

Si vous devez affecter une image à l'arrière-plan, nous ne laissons que la première dans le code, je pense que cela est compréhensible.
Lorsque vous utilisez une image comme arrière-plan, il y a deux règles à garder à l'esprit :

• définir une couleur d'arrière-plan contrastée au cas où l'utilisateur ne pourrait pas afficher une image pour une raison quelconque. Il permet de désactiver l'affichage des images ringardes, d'économiser du trafic.
• n'utilisez pas d'image d'arrière-plan pour transmettre une information important... Pour la raison indiquée ci-dessus, l'utilisateur peut ne pas le voir.

La prise en charge de plusieurs images d'arrière-plan est suffisamment large. Tous les navigateurs, même IE8, prennent en charge cette propriété.