Lorsque nous étudions les styles d'autres sites Web, nous constatons souvent une situation dans laquelle la même image est utilisée dans de nombreux attributs d'arrière-plan pour satisfaire l'utilisation de différentes parties de la page Web. Si vous ouvrez ce genre d'image et y jetez un œil, vous constaterez que cette image contient de nombreuses petites images, telles que :
Autre exemple :
Ces petites images sont les parties après la division de l'image entière. Chaque partie est placée sur une image au lieu d'être stockée sous forme d'images distinctes. Nous savons tous que le but est de réduire le nombre de requêtes http et d'économiser du temps et de la bande passante .
Alors comment se rendre compte que seule une partie d’une image est affichée à différents endroits ? Cela utilise le problème de positionnement de l’image d’arrière-plan dont nous allons parler aujourd’hui. Je crois que beaucoup de gens ont été déprimés par ce problème, et mes amis me le demandent souvent, alors aujourd'hui je vais l'expliquer systématiquement :
nous savons que lorsque vous utilisez une image comme arrière-plan, le CSS doit être écrit comme ceci . Prenez le conteneur div comme arrière-plan . Par exemple, cela peut aussi être un corps, l'arrière-plan de td, p, etc. est le même.
Code : div{ background : #FFF url(image) no-repeatfixed xy ;} |
Les valeurs d'attribut d'arrière-plan ici sont :
#FFF background color : (valeur de couleur, l'endroit où l'image d'arrière-plan n'est pas couverte, ou lorsqu'il y a il n'y a pas de couleur d'arrière-plan de l'image d'arrière-plan)
image photo de fond : (Voici l'adresse de la photo)
Si l'absence de répétition est répétée : (Lorsque l'image est plus petite que la taille du conteneur, l'image sera disposée à plusieurs reprises pour remplir le conteneur par défaut. Aucune répétition signifie aucune répétition. Ce n'est qu'à ce moment que les coordonnées de positionnement suivantes seront utile.)
Si l'arrière-plan fixe défile avec le conteneur : (Il existe deux valeurs facultatives, le défilement défile, le fixe ne défile pas, la valeur par défaut est le défilement)
Positionnement de l'image d'arrière-plan xy : (Notez que le positionnement n'a de sens qu'en cas de non-répétition. C'est le sujet d'aujourd'hui)
Nous devons clarifier quelques points dans le positionnement de l'image d'arrière-plan :
1. La première des deux valeurs est un positionnement horizontal, nous l'appelons positionnement sur l'axe 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 correspond au centre.
2. L'origine de l'axe des coordonnées est le sommet gauche du conteneur correspondant.
3. La flèche de l'axe y de ces coordonnées pointe vers le bas, c'est-à-dire que les valeurs xy dans le coin inférieur droit (à l'intérieur du conteneur) sont toutes positives.
4. Les valeurs xy représentent respectivement la valeur du sommet gauche de l'image d'arrière-plan par rapport à l'origine des coordonnées (c'est-à-dire le sommet gauche du conteneur).
5. La valeur de xy peut être exprimée en pourcentage ou en px.
6. xy peut également être exprimé par les cinq méthodes d'alignement « gauche, droite, haut, bas, centre », mais remarque : lorsqu'il est exprimé par « gauche, droite, haut, bas, centre », les règles d'alignement sont plutôt appliquées. que les règles de coordonnées . Lorsque x est à gauche, cela signifie que le côté gauche de l'image est aligné avec le côté gauche du conteneur. Lorsqu'il est à droite, cela signifie que le côté droit de l'image est aligné avec le côté droit du conteneur. Lorsque y est en haut. , cela signifie que le haut de l'image est aligné avec le haut du conteneur. Lorsqu'il est en bas, cela signifie que le haut de l'image est aligné avec le bas du conteneur. Lorsque xy est égal au centre, cela signifie un alignement centré.
7. Lorsque xy est exprimé en pourcentage ou en px, sa valeur peut être un nombre négatif. Nous pouvons facilement comprendre la signification des nombres négatifs en appliquant les règles de coordonnées. Lorsque x est un nombre négatif, cela signifie que le sommet gauche de l'image est à gauche du sommet gauche du conteneur. Lorsque y est un nombre négatif, cela signifie que le sommet gauche de l'image est au-dessus du point fixe gauche du conteneur. C'est-à-dire vers la gauche et au-delà de la portée du conteneur.
Ci-dessous, j'utilise quelques illustrations pour illustrer plusieurs situations . Le bloc bleu représente l'image et la zone en pointillés représente le conteneur (il peut s'agir d'un div, d'un td ou directement du corps). Notez que nous ne pouvons voir que l'image d'arrière-plan dans le conteneur. . J'utilise du blanc pour indiquer la partie visible, et ce qui dépasse le cadre du conteneur est invisible. J'utilise du gris pour l'indiquer. Les coordonnées du point fixe gauche du conteneur sont (0, 0).
La première, l'image de fond est alignée avec le coin supérieur gauche du contenu, 0px 0px peut aussi s'écrire en haut à gauche
Dans la deuxième image, l'image d'arrière-plan est au milieu du conteneur et les coordonnées du point fixe sont des valeurs positives.
Dans la troisième image, l'image d'arrière-plan se trouve en haut à gauche du conteneur et les coordonnées du point fixe sont négatives
------------------------- --------- ----------------------------------------
À ce stade, nous pouvons comprendre comment utiliser la valeur de positionnement en arrière-plan pour positionner avec précision une image d'arrière-plan. Revenons en arrière et jetons un œil aux deux images présentées au début. Nous pouvons utiliser : le positionnement en arrière-plan et uniquement visible dans le conteneur. . Propriétés pour appeler à volonté une certaine partie de l'image entière.
Mais pour faciliter l'appel, nous devons faire attention à certaines règles lors de la disposition de ces petites images, par exemple : la distance entre les petites images est généralement la taille du conteneur dans lequel les petites images sont appelées, ou la distance est plus grande. afin d'éviter d'être affiché dans le conteneur. Montrez-nous les photos que nous ne voulons pas montrer !
De plus, si le positionnement utilise des pourcentages, l’algorithme est assez particulier. Laissez-moi vous donner un exemple :
Code : background:#FFF url(image) no-repeat wanted 50% -30% ; |
À ce stade, où doit se trouver l'image dans le conteneur ? La formule de l'algorithme est la suivante :
la position des coordonnées ? du sommet gauche de l'image à partir du sommet gauche du conteneur pour
x : (largeur du conteneur - largeur de l'image) x50 %
y : (hauteur du conteneur - hauteur de l'image) x (-30%)
Le résultat obtenu applique la règle des coordonnées. Si la différence est négative et le pourcentage positif, le résultat de l'opération est négatif. Si la différence est négative et le pourcentage négatif, le résultat est positif. Dans l’ensemble, l’opération ici est conforme à l’algorithme. En amenant le résultat de l'opération dans la règle de coordonnées, vous pouvez obtenir la position de l'image.
Par exemple : le conteneur a une largeur : 600 px ; une hauteur : 600 px ; et l'image a une largeur : 200 px, une hauteur : 200 px ;
En utilisant le style ci-dessus, nous pouvons obtenir la position de l'image comme :
x : (600 px-200 px)*50 %
y : (600px-200px)*(-30%)
Comme indiqué ci-dessous :
