Comment centrer l'image de fond en CSS ? Introduction à la méthode de centrage de l'image de fond (exemple de code)-tutoriel CSS-php.cn

Comment centrer l'image de fond en CSS ? Introduction à la méthode de centrage de l'image de fond (exemple de code)

青灯夜游

Libérer： 2018-10-19 15:04:43

original

51613 Les gens l'ont consulté

Dans le développement de pages frontales, il existe deux manières d'afficher les images, à savoir : la balise img affiche les images et l'attribut background est défini pour afficher les images d'arrière-plan. Nous savons que les images img peuvent être centrées, les images d’arrière-plan peuvent-elles donc être centrées ? Comment centrer l’image de fond ? Cet article vous présentera comment centrer l'image d'arrière-plan en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d’abord, voyons comment centrer l’image d’arrière-plan sur le navigateur en utilisant CSS ?

En fait, c'est très simple. L'attribut background-position en CSS peut réaliser l'alignement central horizontal et vertical de l'image d'arrière-plan. Ci-dessous, nous utilisons un exemple de code simple pour présenter comment l'arrière-plan est utilisé. L'attribut position définit l'arrière-plan. L'image est affichée au centre.

Nous utilisons d'abord l'attribut background pour afficher l'image d'arrière-plan :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        background-image:url(Comment centrer limage de fond en CSS ? Introduction à la méthode de centrage de limage de fond (exemple de code)) ;
		        background-size:200px 160px ;
		        background-repeat:no-repeat ;
			}
		</style>
	</head>
	<body>
		<div class="demo">
		
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment centrer limage de fond en CSS ? Introduction à la méthode de centrage de limage de fond (exemple de code)

Regardons ensuite l'arrière-plan- position Comment définir les attributs :

1. Background-position utilise des pixels pour centrer l'image d'arrière-plan (connaître la taille de l'image d'arrière-plan)

Dans l'exemple, le coin inférieur droit de l'arrière-plan L'image coïncide avec le centre de la boîte de démonstration. Pour centrer l'image d'arrière-plan, vous devez faire coïncider le centre de l'image d'arrière-plan avec le centre de la boîte de démonstration. Vous devez déplacer l'image d'arrière-plan de la moitié de la hauteur vers le bas et de la moitié. de la largeur à droite. Par conséquent, en ajoutant le code suivant au CSS, vous pouvez centrer l'image d'arrière-plan

background-position:100px 70px ;  /*宽的一半，高的一半*/

Copier après la connexion

Image d'effet :

Comment centrer limage de fond en CSS ? Introduction à la méthode de centrage de limage de fond (exemple de code)

2. background- position Utilisez 50% pour centrer l'image d'arrière-plan, ce qui est très pratique

background-position:50% 50% ;

Copier après la connexion

3. background-position Utilisez center pour centrer l'image d'arrière-plan, ce qui est très pratique. (Le deuxième centre peut être omis)

background-position:center center;

Copier après la connexion

Les trois méthodes de réglage de la position d'arrière-plan ci-dessus peuvent toutes réaliser le centrage de l'image d'arrière-plan. La première valeur de l'attribut background-position définit le. position horizontale. La deuxième valeur définit la position verticale, vous pouvez décider quelle méthode utiliser en fonction de la situation. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de tutoriels connexes, veuillez visiter le Tutoriel vidéo CSS3 , Tutoriel vidéo HTML5 , Tutoriel vidéo bootstrap !

【Articles connexes recommandés】

Comment centrer l'image img en CSS ? L'attribut display de CSS réalise le centrage de l'image (exemple de code)

3 façons d'utiliser le positionnement CSS pour centrer l'image img (exemple de code)

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!