Résumé de l'utilisation de l'attribut background-position en CSS

L'attribut

background est l'un des attributs les plus courants en CSS. Pour implémenter la découpe CSS, vous n'avez besoin d'utiliser qu'un seul attribut : background-position. Background-position est utilisé pour contrôler la position de l'image d'arrière-plan de l'élément. L'astuce est que vous spécifiez en fait la position du coin supérieur gauche de l'image par rapport au coin supérieur gauche de l'élément. Il accepte trois valeurs : mots-clés, tels que haut, droite, bas, gauche et centre ; valeurs de longueur, telles que px, em, rem, etc. ; > cent Score%. Le contenu suivant parlera de l'utilisation de l'attribut background-position.

Tout d'abord, vous pouvez apprendre des cours gratuits liés au site Web chinois php

Apprendre

1. "CSS 0 Basics" Contexte CSS Cours du chapitre dans "Tutoriel d'introduction"

2. Regardez le cours vidéo

Contexte et marge dans "Tutoriel vidéo CSS du programmeur Dark Horse "

Utilisation de l'attribut background-position

1.

css background- Attribut position

La propriété background-position définit la position de départ de l'image d'arrière-plan.

Cet attribut définit la position de l'image d'arrière-plan originale (définie par background-image). Si l'image d'arrière-plan doit être répétée, elle commencera à partir de ce point.

Conseil : Vous devez définir la propriété background-attachment sur "fixed" pour vous assurer que cette propriété fonctionne correctement dans Firefox et Opera.

2.

Principe du pourcentage de position d'arrière-plan

Pour la taille d'arrière-plan : 100 % automatique, cela signifie que la largeur de l'image d'arrière-plan est la largeur de l'élément * 100 %, et la hauteur est mise à l'échelle proportionnellement. Voir l'arrière-plan CSS3 pour plus de détails.

Pour background-position, il est naturel de penser que le pourcentage est calculé en fonction de la largeur de l'élément parent, mais background-position ne l'est vraiment pas, il a son propre ensemble de principes.

3.

L'utilisation de background-position en CSS

La première des deux valeurs​​est le positionnement horizontal, que nous appelons le positionnement sur l'axe des x. . Cette dernière valeur est le positionnement longitudinal, que nous appelons positionnement sur l'axe y.

S'il n'y a qu'une seule valeur, la direction par défaut est la direction de l'axe x

À ce stade, la direction de l'axe y est par défaut alignée vers le haut et vers le bas, ce qui est le centre. 4.

Css utilise l'attribut background-position pour compléter le code de l'image du sprite

L'image du sprite est CSS Sprite, et certaines personnes l'appellent. C'est un sprite CSS. Une technologie de fusion d'images CSS consiste à fusionner plusieurs petites icônes en une seule image, puis à utiliser la position d'arrière-plan CSS pour afficher la partie qui doit être affichée.

Il peut réduire le nombre de requêtes adressées au serveur lors du chargement des images de pages Web, améliorer la vitesse de chargement des pages et résoudre le problème du clignotement blanc d'IE6 lorsque la souris glisse dessus.

5.

Ce que vous ne savez pas sur background-position dans la série background

Nous savons que background-position est utilisé pour spécifier la valeur de décalage de l'arrière-plan. image, qui permet un L'image démarre à partir d'une position spécifique. CSS Sprites répond aux attentes de fusion des requêtes HTTP en fusionnant plusieurs petites images en une seule grande image, puis en utilisant background-position pour spécifier la zone à afficher.

Questions et réponses connexes

1 Position de fond Il y aura une frontière qui ne peut pas être. supprimé après avoir capturé l'image

2.Confusion sur l'utilisation de background-position.

3. Des questions sur le pourcentage de position en arrière-plan ?

[Recommandations associées]

1. Tutoriels gratuits sur le site Web php chinois : "Manuel CSS en ligne"

2. Tutoriel vidéo du site Web : "Apprenez le didacticiel vidéo HTML du bout des doigts"

3. Tutoriel vidéo gratuit sur le site Web php chinois : "php.cn Dugu Jiujian (2) - vidéo css tutoriel"

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!