Lien d'origine : Arrière-plans en CSS : tout ce que vous devez savoir
Lien de traduction : guide de base CSS
Veuillez conserver les droits d'auteur et les liens lors de la réimpression
L’arrière-plan est une partie importante du CSS et l’une des connaissances de base du CSS que vous devez connaître. Cet article couvrira l'utilisation de base de l'arrière-plan CSS (background), y compris les attributs tels que background-attachment, etc., et présentera également quelques techniques courantes sur l'arrière-plan (background), ainsi que l'arrière-plan (background) en CSS3 (dont 4 new la propriété background).
Contexte en CSS2
Aperçu
Il existe 5 propriétés d'arrière-plan principales dans CSS2, à savoir :
background-color : Spécifie la couleur pour remplir l’arrière-plan.
background-image : image de référence comme arrière-plan.
background-position : Spécifie la position de l'image d'arrière-plan de l'élément.
background-repeat : détermine s'il faut répéter l'image d'arrière-plan.
background-attachment : Détermine si l'image d'arrière-plan défile avec la page.
Ces propriétés peuvent toutes être combinées en une seule propriété abrégée : background. Un point important à noter est que l'arrière-plan occupe toute la zone de contenu de l'élément, y compris le remplissage et la bordure, mais n'inclut pas la marge de l'élément. Cela fonctionne bien dans Firefox, Safari, Opera et IE8, mais dans IE6 et IE7, l'arrière-plan n'inclut pas la bordure.
Propriétés de base
couleur d'arrière-plan
La propriété background-color remplit l'arrière-plan avec une couleur unie. Il existe de nombreuses façons de spécifier cette couleur et les méthodes suivantes donnent toutes le même résultat.
couleur de fond : bleu ;
couleur d'arrière-plan : rvb (0, 0, 255 );
couleur d'arrière-plan : #0000ff ;
La couleur d'arrière-plan peut également être définie sur transparente, ce qui rend visibles les éléments situés en dessous.
image d'arrière-plan
L'attribut background-image permet de spécifier une image à afficher en arrière-plan. Peut être utilisé conjointement avec background-color, donc si l'image ne se répète pas, les zones non couvertes par l'image seront remplies avec la couleur d'arrière-plan. Le code est très simple, rappelez-vous simplement que le chemin est relatif à la feuille de style, donc dans le code suivant, l'image et la feuille de style sont dans le même répertoire.
image d'arrière-plan : url (image.jpg);
Mais si l’image se trouve dans un sous-répertoire appelé images, elle devrait être :
image d'arrière-plan : url(images/image.jpg);
Tangbantomatoes : utilisez ../ pour indiquer le répertoire de niveau supérieur, tel que background-image : url(../images/image.jpg); indiquant que l'image se trouve dans le sous-répertoire images du répertoire de niveau supérieur du feuille de style. C’est un peu compliqué, mais tout le monde devrait déjà le savoir, donc je ne m’étendrai pas là-dessus. Tous droits réservés par Front End Observation, veuillez conserver le lien lors de la réimpression.