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

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

青灯夜游

Libérer： 2021-10-12 18:13:28

original

26929 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut background-size pour modifier la taille de l'image d'arrière-plan. La fonction de cet attribut est de spécifier la taille de l'image d'arrière-plan. Vous pouvez modifier la taille de l'image en définissant la valeur de l'attribut sur a. valeur de longueur ou un pourcentage, ou en définissant la valeur de l'attribut. Utilisez la couverture et contient des mots-clés pour redimensionner l'image.

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

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

En CSS, si vous souhaitez modifier la taille de l'image d'arrière-plan, vous pouvez définir l'attribut background-size.

L'attribut background-size peut spécifier la taille de l'image d'arrière-plan. Format de syntaxe :

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

Copier après la connexion

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 maintiendra 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 conservera les proportions de l'image et redimensionnera l'image à la taille maximale qui tiendra dans la zone de positionnement d'arrière-plan.

L'attribut background-size peut définir la taille de l'image via la valeur de longueur ou le pourcentage, ou redimensionner l'image via la couverture et le contenu.

Exemple :

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

	<body>
		<p><strong>原始背景图片大小</strong></p> 
		
		<div class="box1"></div> 
		<p>本身这个图片宽度为400px，高度225px</p>
		<br />
		<p><strong>通过CSS修改背景图片大小，图片宽度为200px，高度112px</strong></p> 
		<div class="box2"></div>
	</body>

</html>

Copier après la connexion

Rendu :

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