Explication détaillée de l'attribut background du style CSS

background Explication détaillée de l'utilisation :

1 background-color AttributDéfinir la couleur d'arrière-plan de l'élément

Valeur possible

                                                                                                                              Couleur d'arrière-plan (comme #ff0000)                                                                                                                          🎜>La couleur d'arrière-plan par défaut est transparente

2, background-image attribut définit l'arrière-plan de l'élément

image

Valeurs possibles

Image d'arrière-plan unique : background-image:url(a.png) Images d'arrière-plan multiples : background-image:url(a.png),url(b.png)

Dégradé linéaire : background-image:-webkit (-repeating)-linear-gradient(direction, valeur de couleur en pixels ou en pourcentage , valeur de couleur en pixels ou en pourcentage...)                                 Direction :gauche,

droite

,

haut

,

bas

,90deg,180deg

                                                                                                                                                                0,0) 2px

Dégradé radial : background-image:-webkit(-repeating)-radial-gradient([position> || ,] ? [ || , [, ]                              -position>                                                                                                                                                                                                                             contain or cover3. L'attribut background-size est utilisé pour réinitialiser la taille du fichier. image d'arrière-plan

contient : réduit l'image d'arrière-plan pour l'adapter à l'élément d'étiquette

couverture : l'image d'arrière-plan est agrandie et s'étend sur toute la taille de l'élément d'étiquette Pixels : indique le taille du zoom de l'image d'arrière-plan

Pourcentage : le pourcentage est basé sur la taille de l'élément de balise de contenu pour mettre à l'échelle la taille de l'image

4. L'attribut

background-position

est. utilisé pour définir la position de l'image d'arrière-plan

Valeurs possibles : gauche, droite, haut, bas, centre, pixels, pourcentage 5,

background-repeat

l'attribut est utilisé pour définir la position de l'image d'arrière-plan

Valeurs possibles : répéter, répéter-x, répéter-y, sans répétition, espace (ne sera pas recadré ni redimensionné) ), rond (ne sera pas recadré mais changera la taille de l'image)

6. L'attribut

background-attachment

est utilisé pour définir si l'image d'arrière-plan peut défiler

Valeurs possibles : défilement, fixe7, l'attribut

background-clip

est utilisé pour spécifier la zone de dessin de l'arrière-plan

Valeurs possibles : border-box,

padding

-box, content-box

8. L'attribut background-origin est utilisé pour spécifier où l'attribut background-position est positionné par rapport à

Valeurs possibles. : border-box, padding-box, content-box

Extension : dessiner un carrécode html

code css

résultat

Utilisez l'arrière-plan pour dessiner un carré de manière à ce que chaque texte soit à l'intérieur du carré. L'effet est le suivant.

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!