Extrait du travail d'autres personnes ~~~ Très bonnes choses Grammaire :
position d'arrière-plan : longueur ||
position d'arrière-plan : position ||
valeur de position :
length : Pourcentage | Une valeur de longueur composée d’un nombre à virgule flottante et d’un identifiant d’unité.
position : haut | centre | bas gauche | centre droite
Description :
Définit ou récupère la position de l'image d'arrière-plan de l'objet. L'attribut background-image doit être spécifié en premier. Le positionnement de cette propriété n'est pas affecté par le paramètre de remplissage de l'objet.
La valeur par défaut est : 0% 0%. À ce stade, l'image d'arrière-plan sera positionnée dans le coin supérieur gauche de la zone de contenu de l'objet hors remplissage.
Si une seule valeur est spécifiée, cette valeur sera utilisée pour l'abscisse. L'ordonnée sera par défaut de 50 %. Si deux valeurs sont précisées, la deuxième valeur sera utilisée pour l'ordonnée.
Si la valeur de réglage est au centre droit, car à droite comme la valeur de l'abscisse écrasera la valeur centrale, l'image d'arrière-plan sera positionnée à droite.
La propriété de script correspondante est backgroundPosition.
background-position -- définit la
valeur de position de l'image d'arrière-plan :
[ <pourcentage> | <longueur> | gauche centre droite ] [ <pourcentage> |
* niveau
gauche : gauche
centre: moyen
à droite : à droite
* verticale
en haut : activé
centre: moyen
en bas : suivant
* Combinaison de vertical et horizontal
x-% y-%
x-pos y-pos
valeur initiale : 0% 0%
Héritage : Non
S'applique à : tous les éléments
background : background.position : position ***************************** Points clés à expliquer : <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//FR" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<tête>
<title>Problème de positionnement en arrière-plan</title>
<style type="text/css">
<!--
*{
marge : 0 ;
remplissage : 0 ;
}
corps {
texte-align:centre;
arrière-plan : #000 ;
}
#conteneur{
largeur : 1 000 px ;
marge : 0 automatique ;
background:#fff url(images/bg.jpg) pas de répétition en haut à gauche ;
hauteur : 500 px ;
}
-->
</style>
</tête>
<corps>
<div id="conteneur"> </div>
</corps>
</html>1.background-position:left top; (voir Figure 1). Le coin supérieur gauche de l'image d'arrière-plan est aligné avec le coin supérieur gauche du conteneur (conteneur) et la partie excédentaire est masquée. Équivalent à background-position:0,0; également équivalent à background-position:0%,0%;2.background-position:right bottom; Le coin inférieur droit de l'image d'arrière-plan est aligné avec le coin inférieur droit du conteneur et la partie excédentaire est masquée. Équivalent à background-positon : 100 %, 100 % ; également équivalent à background-positon : la largeur du conteneur (conteneur) - la largeur de l'image d'arrière-plan, la hauteur du conteneur (conteneur) - la hauteur de l'image d'arrière-plan 3. position d'arrière-plan : 500px 15px ; (Voir Figure 3). L'image d'arrière-plan est déplacée de 500 px vers la droite et de 15 px vers le bas à partir du coin supérieur gauche du conteneur, et la partie excédentaire est masquée. 4.background-position:-500px -15px (voir Figure 4). L'image d'arrière-plan est déplacée de 500 px vers la gauche et de 15 px vers le haut à partir du coin supérieur gauche du conteneur, et la partie excédentaire est masquée. 5. position d'arrière-plan : 50 % 50 % (voir Figure 5). Equivalent à gauche : {largeur du conteneur - largeur de l'image de fond}*pourcentage de gauche, la partie excédentaire est masquée. Equivalent à droite : {hauteur du conteneur (conteneur) - hauteur de l'image de fond}*pourcentage de droite, la partie excédentaire est masquée. Par exemple : background-position : 50 % 50 % ; c'est-à-dire background-position : (1000-2000)*50%px, (500-30)*50%px ; soit background-position : -500px, 235px ; ; c'est-à-dire que l'image d'arrière-plan se déplace de 500 px vers la gauche à partir du coin supérieur gauche du conteneur et de 235 px vers le bas ; 6. (Dans ce cas, l'image d'arrière-plan doit être bg2.jpg pour voir l'effet. La hauteur de bg.jpg. est trop petit et l'effet n'est pas évident) background-position :-50% -50% (voir Figure 6). Équivalent à gauche : -{{largeur du conteneur (conteneur) - largeur de l'image d'arrière-plan}*pourcentage de gauche (tous les pourcentages sont des valeurs positives)}, et la partie excédentaire est masquée. Équivalent à droite : -{{hauteur du conteneur (conteneur) - hauteur de l'image d'arrière-plan}*pourcentage de droite (tous les pourcentages sont des valeurs positives)}, et la partie excédentaire est masquée. Par exemple : background-position:-50% -50%; est background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px; - 250px,-70px ; c'est-à-dire que l'image d'arrière-plan se déplace de 250 px vers la gauche à partir du coin supérieur gauche du conteneur et de 70 px vers le haut ;