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

藏色散人
Libérer: 2023-01-05 16:11:07
original
15057 Les gens l'ont consulté

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.

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

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(&#39;/i/eg_bg_03.gif&#39;) no-repeat left bottom;}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copier après la connexion

L'effet est le suivant :

Comment définir la position de limage darrière-plan en CSS

Valeur d'attribut de l'attribut background-position :

Comment définir la position de limage darrière-plan en CSS

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal