Explication détaillée sur l'ajout d'un arrière-plan de série d'arrière-plan dans CSS3

1. Passez en revue les propriétés d'arrière-plan que nous avons apprises auparavant

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. nouvel attribut d'arrière-plan CSS3

2.1 background- origin
2.2 Arrière-plan multiple
2.3 taille d'arrière-plan

1.1 Attribut de couleur d'arrière-plan : couleur d'arrière-plan

Il existe 3 façons d'exprimer la couleur : mot, notation RVB, notation de base seize

1. Mot : Ce qui peut être exprimé avec des mots, ce sont des couleurs simples

2. Notation RVB

rgb représente les trois primaires couleurs « rouge », « vert » et « bleu ».
Dans les écrans optiques, chaque pixel est composé de trois couleurs primaires d'éléments électroluminescents, qui sont ajustées à différentes couleurs en fonction de la luminosité.

Séparez par des virgules, les valeurs de r, g, b, chaque valeur va de 0 à 255, soit un total de 256 valeurs

绿色：
background-color: rgb(0,255,0);  
蓝色：
background-color: rgb(0,0,255);

黑色：（光学显示器，每个元件都不发光，黑色）
background-color: rgb(0,0,0);

3. Notation seize base

Toutes les valeurs commençant par # sont hexadécimales.

红色：
background-color: #ff0000;

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

Supplément :
Nombres de base en système décimal (10 au total) : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Nombres de base en hexadécimal (16 au total) : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, d, e, f

En hexadécimal, que représente le chiffre 13 ?
signifie 1 16 et 3 1s. Il est 19 heures. C'est le concept de position. La première personne représente le nombre de 16 et la dernière personne représente le nombre de 1.

1.2 background-image

est utilisé pour ajouter une image d'arrière-plan à la boîte. Le fond est naturellement rempli.

background:url(images/1.jpg);

1.3 background-repeat

Définissez si l'image d'arrière-plan est répétée de manière répétitive.

background-repeat:no-repeat; ne pas répéter background-repeat:repeat-x; répéter horizontalement background-repeat:repeat-y; répéter verticalement

1.4 background-position

L'attribut de positionnement en arrière-plan

background-position:向右移动量 向下移动量

est décrit avec les mots :

décrit les mots gauche et droit : gauche, centre, droite
description Mots haut et bas : haut, centre, bas

右下角：background-position: right bottom;

1.5 Si l'image d'arrière-plan défile (background-attchment)

faire défiler : faire défiler. Valeur par défaut fixe : fixe. Ne défilera pas lorsque la barre de défilement défile local

1.6 attribut complet d'arrière-plan

L'attribut d'arrière-plan est le même que bordeuh, c'est un attribut complet :

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

Vous pouvez omettre n'importe quelle partie :

background: red;

Si la boîte a une image de fond et une couleur de fond. En fait, il affiche principalement des images, et les lieux riches sont remplis de couleurs.

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 Origine-fond de l'image de fond

border-box : Ignorer la bordure et partir directement du point de départ 0, 0 de la bordure Tile padding-box : valeur par défaut, ignorer le remplissage, commencer le carrelage directement à partir du point de départ 0,0 du remplissage content-box : à partir de la partie contenu lors du carrelage commence, une position de rembourrage sera réservée. Le remplissage l'affectera donc

2.2 Arrière-plans multiples

CSS3-nouveau fond de série d'arrière-plans. Les images d'arrière-plan sont séparées par des virgules et vous pouvez écrire plusieurs groupes L'image rendue en premier peut obscurcir l'image rendue ultérieurement.

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 Contrôler la taille de l'image d'arrière-plan (background-size)

background-size : valeur

Valeur :

* *valeur de longueur**px pourcentage : basé sur la largeur de la boîte auto : la taille réelle de l'image d'arrière-plan

contient : Afficher complètement (lorsque la largeur ou la hauteur de l'image "touche" le bord de la boîte lors de la mise à l'échelle, le changement s'arrêtera)

couvrir : complètement couvert Plein (Redimensionnez l' image d'arrière-plan pour recouvrir complètement le conteneur. L'image d'arrière-plan peut dépasser le conteneur)

Lorsqu'il n'y a qu'une seule valeur, comme la largeur, pour obtenir l'étirement, la hauteur sera par défaut auto , en conservant des proportions égales.
Lorsqu'il y a deux valeurs, la largeur et la hauteur seront respectivement étirées aux valeurs correspondantes et pourront être déformées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!