Une brève discussion sur la propriété background de CSS

Chaque élément de l'arborescence du document n'est qu'une boîte rectangulaire. Ces boîtes ont un calque d'arrière-plan qui peut être complètement transparent ou d'autres couleurs, ou il peut s'agir d'une image. Cette couche d'arrière-plan est contrôlée par 8 propriétés CSS (plus 1 propriété abrégée).

background-color

La propriété background-color définit la couleur d'arrière-plan de l'élément. Sa valeur peut être n'importe quelle valeur de couleur légale ou le mot-clé transparent.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

Tutoriels associés : Tutoriel vidéo CSS

La couleur d'arrière-plan est dessinée sur la page spécifiée par le [background-clip] (#backgroundclip) attribut dans la zone du modèle de boîte. Si des images d'arrière-plan sont également définies, le calque de couleur est dessiné derrière elles. Contrairement aux calques d’image, qui peuvent en avoir plusieurs, nous ne pouvons avoir qu’un seul calque de couleur pour un élément.

background-image

L'attribut background-image définit une ou plusieurs images d'arrière-plan pour l'élément. Sa valeur est généralement l'url de l'image définie avec la notation url(). Vous pouvez également utiliser none comme valeur, mais cela générera un calque d'arrière-plan vide

.left { background-image: url('ire.png'); }
.right { background-image: none; }

Nous pouvons également spécifier plusieurs images d'arrière-plan séparées par des virgules. Les images suivantes seront dessinées derrière l'image précédente dans la direction de l'axe Z.

.middle { 
  background-image: url('khaled.png'), url('ire.png');
  /* Other styles */
  background-repeat: no-repeat; 
  background-size: 100px;
}

background-repeat

L'attribut background-repeat contrôle la taille de l'image d'arrière-plan lorsqu'elle est modifiée par le [background-size] (# backgroundsize) et la propriété [ background-position] (#backgroundposition) comment mosaïquer après le positionnement.

La valeur de cet attribut peut être des mots-clés répétition-x, répétition-y, répétition, espace, rond, sans répétition En plus de répétition-x et répétition-y, d'autres valeurs peuvent être x. -axis et y-axis Définissez-le une fois, ou vous pouvez définir chaque dimension individuellement.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

L'attribut background-size définit la taille de l'image d'arrière-plan. Sa valeur peut être un mot-clé, une longueur ou un pourcentage.

Les mots-clés disponibles pour cet attribut sont "contient" et "cover". contain redimensionnera l’image proportionnellement à sa taille maximale. La couverture, en revanche, redimensionnera l'image à la taille la plus petite possible, où toute la zone d'arrière-plan est toujours couverte.

.left { 
  background-size: contain;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.right { background-size: cover; /* Other styles same as .left */ }

Pour la longueur et le pourcentage, nous pouvons spécifier la largeur et la hauteur de l'image d'arrière-plan en même temps, et la valeur en pourcentage est calculée en fonction de la taille de l'élément .

.left { background-size: 50px; /* Other styles same as .left */ }
.right { background-size: 50% 80%; /* Other styles same as .left */ }

background-attachment

La propriété background-attachment contrôle la façon dont l'image d'arrière-plan défile par rapport à la fenêtre et à l'élément. Il a trois valeurs potentielles.

fixe signifie que l'image d'arrière-plan est fixée à la fenêtre et ne bougera pas, même si l'utilisateur fait défiler la fenêtre. local signifie que l'image d'arrière-plan est fixée à son emplacement dans l'élément. Si l'élément peut défiler et que l'image d'arrière-plan est positionnée en haut, lorsque l'utilisateur fait défiler l'élément vers le bas, l'image d'arrière-plan défile hors de la vue. Enfin, scroll signifie que l'image d'arrière-plan est fixe et ne défilera pas lorsque le contenu de l'élément défile.

.left { 
  background-attachment: fixed;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Other styles same as .left */ }
.right { background-attachment: scroll; /* Other styles same as .left */ }

background-position

Cet attribut est combiné avec l'attribut background-origin pour définir où doit être la position de départ de l'image d'arrière-plan. Sa valeur peut être un mot-clé, une longueur ou un pourcentage, et nous pouvons spécifier la position le long des axes x et y.

Les mots-clés qui peuvent être utilisés pour cet attribut sont top, right, bottom, left et center. Nous pouvons combiner ces mots-clés de n'importe quelle manière. Si un seul mot-clé est explicitement spécifié, l'autre sera par défaut. centre.

.top-left { 
  background-position: top;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /* Other styles same as .top-left */ }
.top-right { background-position: bottom;  /* Other styles same as .top-left */ }
.bottom-left { background-position: left;  /* Other styles same as .top-left */ }
.bottom-right { background-position: center;  /* Other styles same as .top-left */ }

Pour la longueur et le pourcentage, nous pouvons également spécifier la position le long des axes x et y. Les valeurs en pourcentage sont calculées en fonction de la taille de l'élément. L'attribut background-origin spécifie sur quelle zone du modèle de boîte l'image d'arrière-plan doit être positionnée.

Lorsque la valeur est border-box, l'image d'arrière-plan est positionnée en fonction de la zone de bordure. Lorsqu'elle est padding-box, sa position est positionnée en fonction de la zone de marge. Lorsqu'elle est content-box, elle est positionnée en fonction de la zone de bordure. la position est positionnée en fonction de la zone de contenu.

.left { background-position: 20px 70px; /* Others same as .top-left */ }
.right { background-position: 50%; /* Others same as .top-left */ }

.left{ 
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a; 
  background-repeat: no-repeat;
  background-position: top left; 
  border: 10px dotted black; 
  padding: 20px;
}
.middle { background-clip: padding-box;  /* Other styles same as .left*/ }
.right { background-clip: content-box;  /* Other styles same as .left*/ }

background

最后，background属性是其他背景相关属性的简写。子属性的顺序无关紧要，因为每个属性的数据类型不同。然而对于background-origin 和 background-clip，如果只指定了一个盒模型区域，那么这两个属性都会应用这个值。如果指定了两个，那么第一个值将用于background-origin属性。

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!