规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位： 长度|百分比（相对于父盒子来说）|cover|contain;
示例：在红色border的div里放入背景图片，不设置时，显示图片原来大小的样子。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 1000px;
height: 600px;
border: 1px solid red;
/* 图片宽度是500*500 */
background: url(imgs/girl.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 写2个参数：background-size: 500px 800px;
- 只写一个参数 肯定是宽度 高度省略了 会等比例缩放
- 单位可以跟% 相对于父盒子来说
- cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全
- contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域
cover（相当于100%）：
contain
