Introduction aux caractéristiques de l'attribut background en CSS

Cet article vous apporte une introduction aux caractéristiques de l'attribut background en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Ordre des abréviations : color-image-repeat-attachment-position

eg:body{background:#ffffff url('img.png') no-repeat right top}

Introduisons les caractéristiques de chaque attribut dans l'ordre :

1. background-color : rouge ; #ffffff ; rgb (255,255,255)

Trois méthodes de représentation des couleurs, à savoir Couleur ; le nom, l'hexadécimal et la couleur d'arrière-plan RVB peuvent être définis pour tous les éléments ; la couleur par défaut est transparente.

2. background-image : url ('img.jpg')

L'adresse de l'image peut être un chemin relatif ou un chemin absolu ; la valeur par défaut est un affichage en mosaïque et répété

3. background-repeat : répéter-x ; répéter-y ; no-repeat ;

Affichage de répétition en mosaïque par défaut

4. background-attachment : scroll ; hériter ;

background-attachment signifie si l'image d'arrière-plan est fixe ou défile avec le reste de la page ; la valeur par défaut est scroll

scroll signifie que l'image d'arrière-plan défile avec le reste de la page ; ; fixe signifie fixe ; hériter est hérité de l'élément parent ;

5. position d'arrière-plan : en bas au centre ; en haut ; 66 % 33 % ;

4 représentations : l'une est en haut, à gauche, en bas, à droite, la combinaison de deux ; valeur, le système par défaut est centré ; trois est un pourcentage ; quatre consiste à écrire directement les pixels.

Ces deux derniers ont une grande précision.

6. background-clip: border-box; padding-box; content-box; spécifie la zone de dessin de l'image d'arrière-plan.

7. background-origin: border-box; padding-box; spécifie la zone de positionnement de l'image d'arrière-plan.

Remarque : Si la pièce jointe d'arrière-plan de l'image d'arrière-plan est "fixée", cet attribut n'a aucun effet.

8. background-size : auto (par défaut) ; length (deux valeurs, une largeur et une hauteur. S'il y a une valeur, la seconde est auto par défaut (le principe d'affectation est le) ; identique à la longueur ); couverture (cela contient (cela maintient le rapport hauteur/largeur de l'image et redimensionne l'image à la taille minimale qui s'adaptera à la zone de positionnement de l'arrière-plan) );

Recommandations associées :

CSS : couleur d'arrière-plan/image d'arrière-plan_html/css_WEB-ITnose

Arrière-plan CSS que vous ne connaissez pas – Solution complète pour les attributs d'arrière-plan CSS

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!