Comment utiliser CSS Backgrack-Size and Background Position

Maître les compétences de la taille et de la position de l'image de fond CSS pour créer facilement des dispositions réactives! Cet article explorera les propriétés background-size et background-position en profondeur pour vous aider à contrôler de manière flexible la taille et la position des images d'arrière-plan.

Points de base:

L'attribut
• background-size est utilisé pour ajuster la taille de l'image d'arrière-plan, prend en charge les mots clés tels que cover et contain, ainsi que des unités numériques telles que les pixels, les EM et les pourcentages.
L'attribut
• background-position contrôle la position de l'image d'arrière-plan dans le conteneur et fonctionne mieux avec background-size: cover.
• background-position Vous pouvez utiliser des mots clés (en haut, en bas, à gauche, à droite, au centre), à ​​la valeur de longueur (PX, EM) ou à la valeur de pourcentage pour obtenir un positionnement d'image précis.
La combinaison de
• background-size et background-position est particulièrement adaptée aux dispositions réactives pour faire face aux modifications de la taille des conteneurs.

Exercice pratique:

Nous utiliserons les images d'OIA, Santorini (400px x 600px) pour la démonstration.

Dans notre exemple, un 300px x 200px <div> est centré. <code><div> ont un fond jaune, l'image d'arrière-plan est au-dessus de l'arrière-plan jaune. <p> Si vous ajoutez directement l'image d'arrière-plan, seule une partie de l'image sera affichée car la taille de l'image est supérieure à <code><div>. <p> <img src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" alt="How to Use CSS background-size and background-position "> </p> L'attribut <p> <code>background-size nous aidera à résoudre ce problème.

Utiliser background-size Définir la taille de l'arrière-plan:

L'attribut

background-size fournit deux mots clés cover et contain, ainsi que des unités numériques (px, em,%) et auto.

• background-size: contain;: L'image est affichée en totalité, mais peut ne pas être remplie du conteneur.

• background-size: cover;: L'image est pleine de conteneurs, mais certaines images peuvent être recadrées.

  

• Autres valeurs: Utilisez des valeurs de pourcentage ou de pixels pour définir la taille de l'image, mais veillez à éviter la déformation de l'image.

Utiliser background-position Définissez la position de l'image d'arrière-plan:

Par défaut, le coin supérieur gauche de l'image d'arrière-plan est situé dans le coin supérieur gauche du conteneur. L'attribut background-position nous permet de contrôler avec précision la position de l'image.

• Mots-clés: utilisez des combinaisons de mots clés et du positionnement à l'aide de top, bottom, left, right et d'autres mots clés. center

• Valeur de longueur: utilisez des pixels, EM et d'autres valeurs de longueur pour affiner la position de l'image.

• pour cent: utilisez la valeur pour pourcentage pour positionner, vous devez comprendre sa relation proportionnelle par rapport au conteneur.

  

Résumé:

et background-size Les propriétés sont des outils puissants dans CSS, particulièrement utiles lors de la création de dispositions réactives. L'utilisation flexible de ces deux attributs peut facilement obtenir divers effets d'image de fond. background-position

Pour plus de détails, veuillez vous référer à la documentation MDN:

et background-size. De plus, il est recommandé d'apprendre les propriétés background-position et object-fit, qui conviennent également aux images en ligne. object-position

FAQS:

Comment localiser l'image d'arrière-plan dans le coin inférieur droit de la page? Utiliser
• . background-position: bottom right;
L'image d'arrière-plan peut-elle être positionnée en utilisant le pourcentage? Oui,
• accepte les valeurs de pourcentage. background-position
Comment faire la couverture de l'image d'arrière-plan tout l'élément? Utiliser
• . background-size: cover; La différence entre
• et background-size: cover;? background-size: contain; Remplissez le conteneur, cover plein l'affichage complet. contain
CSS prend-il en charge plusieurs images d'arrière-plan? Soutenu, séparé par des virgules.

J'espère que cet article pourra vous aider à mieux comprendre et appliquer la taille de l'image d'arrière-plan CSS et les propriétés de position!