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

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

青灯夜游

Libérer： 2021-11-10 17:05:51

original

30300 Les gens l'ont consulté

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>

Copier après la connexion

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