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

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

青灯夜游

Libérer： 2023-01-05 16:10:22

original

22825 Les gens l'ont consulté

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;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

Copier après la connexion

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="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"   alt="Flowers"></p>

	</body>

</html>

Copier après la connexion

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!