Maison > Article > interface Web > Introduction à l'utilisation de la position d'arrière-plan de la position de l'image d'arrière-plan en CSS3
Cet article partage avec vous l'utilisation de background-position en CSS3. Les amis dans le besoin peuvent s'y référer.
En définissant background-position avant css3, vous pouvez définir la position à partir du coin supérieur gauche de l'élément.
Par exemple :
div{background-position:20px 40px;/*20px from left & 20px from top*/}
Le problème est que la position exacte ne peut pas être déterminée à partir d'un autre point, par exemple depuis le bas/droite, on ne peut partir que du coin supérieur gauche.
On peut écrire : background-position : en bas à droite ; on peut aussi écrire : background position : 70%/en partant de la gauche/80%/en partant du haut/;,
Mais on peut Je ne commence pas par écrire 20px à droite et 20px à partir du bas.
Jetons un coup d'œil à la nouvelle propriété background-position
Pour résoudre ce problème, CSS3 nous offre la possibilité de déterminer par où commencer le positionnement et de déterminer le 0 Options ,0 points.
Comment y parvenir ?
On peut désormais écrire le début de la position horizontale et verticale avec css3, comme la valeur du coin inférieur droit + le point de départ, au lieu de simplement écrire 2 valeurs (l'horizontale et la verticale points du coin supérieur gauche).
Créons un exemple :
Créez d'abord un div vide avec quelques styles :
HTML :
<div class="box"> </div>
CSS
.box{ width:300px; height:300px; background-color:#ddd; padding:10px; border:solid 3px #333; border-radius:10px; }
Nous allons maintenant ajouter une image d'arrière-plan de taille fixe (nouvelle fonctionnalité en CSS3).
.box{ background:url(image/cup.jpg) no-repeat; background-size:150px 150px; }
Enfin, nous ajouterons la nouvelle position d'arrière-plan.
Nous définissons d'abord le point de départ horizontal, par exemple : à droite et après cela, nous pouvons définir la distance souhaitée, par exemple 20px.
Deuxièmement, nous définissons le point de départ vertical, par exemple : bas, puis nous définissons la distance dont nous avons besoin à partir de cette position, par exemple 40 pixels.
Nouvelle position d'arrière-plan CSS
.box{ background-position :right 20px bottom 40px;}
L'effet est le suivant :
Nous avons obtenu cet effet. Vous pouvez également implémenter une boîte contenant plusieurs images d'arrière-plan. Le code est le suivant
<div class="box"> </div>
L'effet est le suivant : >
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!