代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
position:relative;
top:100px;
left:100px;
background-image: url('./img/test.jpg');
background-size:cover;
background-repeat: no-repeat;
background-position:center center;
text-align:center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<h5>Hello World!</h5>
</div>
</body>
</html>
运行结果：
图片原图如下：
可以看到，图片只是显示了中间的部分
注意：background-size 这个属性的两个值：cover和contain
cover: 保持图像的纵横比 , 并将图像缩放成将完全覆盖背景定位区域的最小大小 ,即让图片填充满父节点，超出部分隐藏，仅显示中间
contain: 保持图像的纵横比， 并将图像缩放成将适合背景定位区域的最大大小 ，即 让图片根据父节点宽高等比例缩放。