上查看所有课程
CSS background-size 属性用于控制元素背景图像的大小。例如：
body {
background-image: url("girl-illustration.png");
background-size: 400px;
background-repeat: no-repeat;
}浏览器输出
在此，background-size 属性将背景图像的宽度设置为 400px。
CSS 背景尺寸语法
background-size 属性的语法是：
background-size: auto | length | cover | contain | initial | inherit;这里，
auto：指定背景图像的原始尺寸（默认值）length：允许使用 px、em 等长度值设置背景图像大小percentage：允许相对于容器大小缩放图像cover：允许背景图像按比例缩放，保持纵横比contain：允许背景图像尽可能大到足以适应背景，如果容器大于图像，则图像会重复以填充背景initial：将属性值设置为默认值inherit：继承其父元素的属性值。
使用长度单位 示例 1：使用长度单位的背景尺寸
让我们看一个使用长度单位和 background-size 属性的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-clip</title>
</head>
<body>
<!-- Using background image in the body -->
</body>
</html>body {
background-image: url("https://programiz.cn/blog/content/images/2020/08/banner-image-binary-4.png");
/* stops the image from repeating itself */
background-repeat: no-repeat;
/* sets the width of the image to 400px */
background-size: 400px;
}浏览器输出
使用长度值时，background-size 属性会接受一个额外的参数来指定图像的高度。例如：
background-size: 400px 600px;上面的声明将背景图像的宽度设置为 400px，高度设置为 600px。但是，高度值是可选的，如果不指定，背景图像将保持其纵横比。
注意：默认情况下，如果图像尺寸小于容器尺寸，背景图像会重复。
示例 2：使用 cover 的背景尺寸
让我们看一个使用 cover 值和 background-size 属性的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-clip</title>
</head>
<body>
<!-- Using background image in the body -->
</body>
</html>body {
background-image: url("https://programiz.cn/blog/content/images/2020/08/banner-image-binary-4.png");
/* scales the image to cover the background area */
background-size: cover;
}浏览器输出
在上面的示例中，background-size 属性的 cover 值将背景图像调整为覆盖整个元素，同时保持其纵横比。
示例 3：使用 contain 的背景尺寸
让我们看一个使用 contain 和 background-size 属性的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-clip</title>
</head>
<body>
<div>
<!-- Adding a background iamge in div -->
</div>
</body>
</html>div {
height: 200px;
border: 2px solid black;
background-image: url("https://programiz.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
/* prevent image from repeating itself */
background-repeat: no-repeat;
/* resizes the image to fit the background area while preserving aspect ratio of image */
background-size: contain;
}浏览器输出
在上面的示例中，background-size 的 contain 值将背景图像调整为适合 div 内部，同时保持图像的纵横比。
不使用 background-size: contain，浏览器将显示以下输出。
在此，背景图像保持其原始尺寸。图像被裁剪，不适合背景。