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!