Maison  >  Article  >  interface Web  >  Comment définir la taille de l'image d'arrière-plan en CSS

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

青灯夜游
青灯夜游original
2021-04-21 15:29:4422612parcourir

En CSS, vous pouvez utiliser l'attribut background-size pour définir la taille de l'image d'arrière-plan. Cet attribut peut spécifier la taille de l'image d'arrière-plan. Le format de syntaxe est "background-size : valeur numérique avec longueur. unité | valeur en pourcentage | couverture | contient ;".

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

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

En CSS, vous pouvez utiliser l'attribut background-size pour définir la taille de l'image d'arrière-plan ; elle peut être affichée par valeur de longueur ou en pourcentage, et vous pouvez également redimensionner l'image via la couverture et contenir .

background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

Valeur de l'attribut :

Valeur Description
longueur
描述
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
Définir l'image d'arrière-plan hauteur et largeur.

La première valeur définit la largeur et la deuxième valeur définit la hauteur.


Si une seule valeur est définie, la deuxième valeur sera définie sur "auto".

pourcentage

Définit la largeur et la hauteur de l'image d'arrière-plan en pourcentage de l'image parent. élément. Comment définir la taille de limage darrière-plan en CSS

La première valeur définit la largeur et la deuxième valeur définit la hauteur.

Si une seule valeur est définie, la deuxième valeur sera définie sur "auto".

couverture Agrandissez l'image d'arrière-plan suffisamment grande pour que l'image d'arrière-plan recouvre complètement la zone d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone de positionnement d'arrière-plan.
contenir Agrandit l'image à sa taille maximale afin que sa largeur et sa hauteur s'adaptent entièrement à la zone de contenu.
Exemple de code :
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/5.jpg);
				background-size: 100px 100px;
				-moz-background-size: 100px 100px;
				/* 老版本的 Firefox */
				background-repeat: no-repeat;
				padding-top: 80px;
			}
		</style>
	</head>

	<body>
		<p>上面是缩小的背景图片。</p>

		<p>原始图片:<br />
			<img src="img/5.jpg" alt="Flowers"></p>

	</body>

</html>
Rendu : ( 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