Comment utiliser la position d'arrière-plan de la position de l'image d'arrière-plan en CSS-tutoriel CSS-php.cn

Comment utiliser la position d'arrière-plan de la position de l'image d'arrière-plan en CSS

yulia

Libérer： 2018-09-07 12:02:47

original

6169 Les gens l'ont consulté

Lorsque nous utilisons des images d'arrière-plan, nous constatons souvent que l'emplacement de l'image d'arrière-plan n'est pas celui que nous souhaitons. Alors, comment définir l'emplacement de l'image d'arrière-plan ? Ce qui suit présentera l'utilisation de la position d'arrière-plan de la position de l'image d'arrière-plan en CSS.
Dans l'attribut background image position de l'image d'arrière-plan, background-position est utilisé pour contrôler la position de l'image d'arrière-plan de l'élément. Il accepte trois valeurs :

Mots clés : tels que haut, droite, bas, gauche, centre
Valeur de longueur telle que px, em, rem, etc.
Valeur en pourcentage : %
Général Les valeurs les plus couramment utilisées ou les valeurs les plus comprises sont les mots-clés et les valeurs de longueur, et les pourcentages les plus couramment utilisés sont 0 %, 50 % et 100 %.
Dans l'attribut de position de l'image d'arrière-plan, il y a généralement deux valeurs d'attribut. La première représente la position horizontale, qui est l'axe X ; la seconde représente la position verticale, qui est l'axe Y. valeurs pour définir le point de départ de l'image d'arrière-plan. Position, une valeur peut être utilisée si la position de départ est la même dans les deux sens.

Les significations de certaines valeurs d'attribut sont les suivantes :

top : La position initiale de l'image d'arrière-plan est le haut de l'élément

center : Le la position de départ de l'image d'arrière-plan est le milieu de l'élément

gauche : la position de départ de l'image d'arrière-plan est sur le côté gauche de l'élément

droite : la position de départ de l'image d'arrière-plan est sur le côté droit de l'élément

en bas : La position de départ de l'image d'arrière-plan est en bas de l'élément

Exemple : Définissez la position de l'image d'arrière-plan à gauche et en bas , et définissez que l'image d'arrière-plan n'est pas en mosaïque.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   div{width: 200px;height: 200px;border:1px solid #ccc;background: url(img/gift2x.png) no-repeat left bottom;}
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

Copier après la connexion

Rendu :