以下演示 background-repeat的三种情况：
请看代码：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>背景色</title><style>.box,.box1,.box2,.box3{margin:50px auto;margin-bottom:50px;border:5px solid #000;width:200px;height:100px;background-image: url(22.png);}.box1{background-repeat:repeat-x;}.box2{background-repeat:repeat-y;}</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
总结：
默认为 background-repeat：repeat ，也就是全部覆盖 ，
background-repeat:repeat-x; 是只是横向的
background-repeat:repeat-y;只是 纵向的
background-repeat:no-repeat; 不重复
如下效果：
