propriétés liées à l'arrière-plan en CSS

background-origin: Spécifie à quelle partie du conteneur la propriété background-position est positionnée par rapport.

Padding-box L'image d'arrière-plan est positionnée par rapport à la zone de remplissage (par défaut)

Border-box L'image d'arrière-plan est positionnée par rapport à la zone de bordure

contenu ; -box L'image d'arrière-plan 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 de l'image de fond) * 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 cachée.

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

background-size :Définissez 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 un rapport fixe basé sur 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, ce qui équivaut à 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③Les images de chemin absolu doivent être référencées④Compatible avec ie7, 8

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!