Maison > Article > interface Web > Comment utiliser la position d'arrière-plan de la position de l'image d'arrière-plan en CSS
Comment utiliser la position d'arrière-plan de la position de l'image d'arrière-plan en CSS
- yuliaoriginal
- 2018-09-07 12:02:476154parcourir
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>Rendu :
Ce qui précède est une brève introduction à la position d'arrière-plan, j'espère que ce sera le cas vous être utile !
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!