Maison >interface Web >tutoriel CSS >Comment changer la taille de l'image d'arrière-plan en CSS

Comment changer la taille de l'image d'arrière-plan en CSS

青灯夜游
青灯夜游original
2021-11-10 17:05:5130305parcourir

En CSS, vous pouvez modifier la taille de l'image d'arrière-plan en définissant le style d'attribut background-size pour l'image d'arrière-plan. La fonction de cet attribut est de spécifier la taille de l'image d'arrière-plan. La syntaxe est "background-size : valeur de largeur valeur de hauteur ;".

Comment changer la taille de l'image d'arrière-plan en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez modifier la taille de l'image d'arrière-plan en définissant le style d'attribut background-size sur l'image d'arrière-plan.

L'attribut background-size spécifie la taille de l'image d'arrière-plan.

Syntaxe : background-size: length|percentage|cover|contain;

  • length Définissez la hauteur et la largeur de l'image d'arrière-plan. La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est définie sur auto et

  • pourcentage calculera le pourcentage de la zone de positionnement par rapport à l'arrière-plan. La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est définie sur "auto"

  • cover qui conservera le rapport hauteur/largeur de l'image et redimensionnera l'image à la taille minimale qui couvrira complètement la zone de positionnement de l'arrière-plan.

  • contain Cela maintiendra les proportions de l'image et redimensionnera l'image à la taille maximale qui tiendra dans la zone de positionnement d'arrière-plan.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width: 400px;
				height: 224px;
			}
			.box1{
				background:url(img/2.jpg) no-repeat;
			}
			.box2{
				background:url(img/2.jpg) no-repeat;
				background-size: 200px 160px;
				
			}
		</style>
	</head>

	<body>
		<p><strong>原始图片大小</strong></p> 
		
		<div class="box1"></div> 
		<p>本身这个图片宽度为400px,高度224px</p>
		<br />
		<p><strong>通过CSS background-size修改后的背景图片</strong></p> 
		<div class="box2"></div>
	</body>

</html>

Comment changer la taille de limage darrière-plan en CSS

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!

Déclaration:
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