1.cover:把背景图像扩展至足够大(非等比例的扩大),以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 1000px;
height: 480px;
margin: 0 auto;
border: 10px solid purple;
background: url(./img/4-1F62G04516.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3226b55ae16aeee542711eddf7e3f6f4.png)
2.把图像扩展至最大尺寸(等比例的扩大),以使其宽度和高度完全适应内容区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 1000px;
height: 480px;
margin: 0 auto;
border: 10px solid purple;
background: url(./img/4-1F62G04516.jpg) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/acd060ceda6c25bdfd073a46f06fa7e4.png)