Maison > Article > interface Web > Comment définir la position de l'image d'arrière-plan en CSS
Comment définir la position de l'image d'arrière-plan en CSS
- 藏色散人original
- 2021-04-25 10:02:0815051parcourir
Comment définir la position de l'image d'arrière-plan avec CSS : créez d'abord un exemple de fichier HTML ; puis créez un div dans le corps ; enfin passez "background: url('/i/eg_bg_03.gif')no-repeat en bas à gauche ;}" Définissez simplement la position de l'image d'arrière-plan.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Comment définir la position de l'image d'arrière-plan avec CSS ?
Lors de l'utilisation d'images d'arrière-plan, nous constatons souvent que l'emplacement de l'image d'arrière-plan n'est pas ce que nous voulons. Alors, comment définir l'emplacement de l'image d'arrière-plan ? Voyons comment définir la position de l'image d'arrière-plan avec 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.
Pourcentage ; La propriété value :%
background-position définit la position de départ de l'image d'arrière-plan.
Cet attribut définit la position de l'image d'arrière-plan originale (définie par background-image). Si l'image d'arrière-plan doit être répétée, elle commencera à partir de ce point.
Exemple :
<!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('/i/eg_bg_03.gif') no-repeat left bottom;}
</style>
</head>
<body>
<div></div>
</body>
</html>L'effet est le suivant :
Valeur d'attribut de l'attribut background-position :
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 : La position de départ de l'image d'arrière-plan est le milieu de l'élément
left : La position de départ de l'image d'arrière-plan est sur le côté gauche de l'élément
right : 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
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!