Introduction détaillée aux propriétés liées à l'arrière-plan

background-origin : Spécifie sur quelle partie du conteneur la background-position attribut est positionné par rapport.

　padding-box Image d'arrière-plan est positionnée par rapport à la Padding (par défaut)

　b ; l'image d'arrière-plan de la commandeer-box est positionnée par rapport à la zone de bordure

　l'image d'arrière-plan de la boîte de contenu est positionnée par rapport à la zone de contenu.

background-position : Définit la position de départ de l'image d'arrière-plan affichée dans le conteneur.

Valeur par défaut : 0 0 (affichée à partir du point supérieur gauche de l'image d'arrière-plan)

Valeur : Int px Int px ; position du conteneur, qui peut être une valeur négative. Une valeur négative signifie que le point supérieur gauche de l’image d’arrière-plan ne se trouve pas à l’intérieur du conteneur et que la partie au-delà est masquée.

Si une seule valeur est définie, l'autre valeur sera "centrée" (50%/centre)

Si un pourcentage est utilisé, les coordonnées sont calculées selon la formule suivante :

x (largeur du conteneur - largeur du fond image ) * x pourcentage, la partie excédentaire est masquée y : (hauteur du conteneur - hauteur de l'image de fond) * y pourcentage ; , la partie excédentaire est masquée.

Donc gauche/haut équivaut à 0%, droite/bas équivaut à 100% (arrière-plan Le bord droit/inférieur de l'image coïncide avec le conteneur), le centre équivaut à 50 % (l'image de fond est au milieu du conteneur).

background-size : Définit la taille de l'image d'arrière-plan (IE8 ne prend pas en charge cet attribut)

Pourcentage/longueur : S'il s'agit d'un pourcentage, la taille de l'image d'arrière-plan est multipliée par le conteneur Le produit des pourcentages. Définissez-en un seul et définissez le second sur automatique (pour conserver le même rapport hauteur/largeur que l'image d'arrière-plan d'origine).

Si les deux sont définis à 100 %, l'image d'arrière-plan remplira le conteneur, mais le rapport hauteur/largeur changera.

contenir : Le conteneur contient l'intégralité de l'image d'arrière-plan selon une proportion fixe de l'image d'arrière-plan. La taille de l'image d'arrière-plan est agrandie selon une proportion fixe de l'image d'arrière-plan jusqu'à ce qu'un côté atteigne la limite du conteneur, l'autre côté sera souvent vide (en l'absence de répétition).

Couverture : L'image d'arrière-plan est agrandie selon un rapport hauteur/largeur fixe jusqu'à ce qu'elle remplisse tout le conteneur (le côté le plus court de l'image d'arrière-plan atteint également la limite du conteneur). Une partie de l’image de fond sera coupée car elle dépasse le conteneur.

Compatible IE8 :

filtre : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='absolute path',sizingMethod='scale/crop');

Recadrage : la taille de l'image d'arrière-plan reste inchangée et l'image est coupée pour s'adapter à la taille de la zone.

　image : Valeur par défaut. Augmentez ou réduisez la limite de taille de la zone pour l'adapter à la taille de l'image de fond, équivalent à l'effet de débordement : visible.

Échelle : redimensionnez l'image d'arrière-plan pour l'adapter aux limites de taille de la zone.

　①Impossible de spécifier un pourcentage d'arrière-plan de taille ②Convient uniquement à une seule image et ne peut pas utiliser de sprites d'image et d'autres puzzles ③Doit référencer l'image de chemin absolu ④Compatible avec ie7, 8

et ci-dessus Tous sont basés sur une compréhension personnelle. S'il y a des erreurs, veuillez laisser un message pour les corriger.

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!