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

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

青灯夜游
青灯夜游original
2021-10-12 18:13:2826912parcourir

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;
  • 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>

Rendu :

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

(Partage vidéo 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