Maison > interface Web > tutoriel CSS > Explication détaillée de l'attribut background du style CSS

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

高洛峰
Libérer: 2017-03-15 11:01:36
original
1903 Les gens l'ont consulté

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal