1# background-position样式动画
2
3通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。
4
5
6```html
7<!-- xxx.hml -->
8<div class="container">
9  <div class="content"></div>
10  <div class="content1"></div>
11</div>
12```
13
14
15```css
16/* xxx.css */
17.container {
18  height: 100%;
19  background-color:#F1F3F5;
20  display: flex;
21  flex-direction: column;
22  justify-content: center;
23  align-items: center;
24  width: 100%;
25}
26.content{
27  width: 400px;
28  height: 400px;
29  /* 不建议图片长宽比为1:1 */
30  background-image: url('common/images/bg-tv.jpg');
31  background-size: 100%;
32  background-repeat: no-repeat;
33  animation: change 3s infinite;
34  border: 1px solid black;
35}
36.content1{
37  margin-top:50px;
38  width: 400px;
39  height: 400px;
40  background-image: url('common/images/bg-tv.jpg');
41  background-size: 50%;
42  background-repeat: no-repeat;
43  animation: change1 5s infinite;
44  border: 1px solid black;
45}
46/* 背景图片移动出组件 */
47@keyframes change{
48  0%{
49    background-position:0px top;
50  }
51  25%{
52    background-position:400px top;
53  }
54  50%{
55    background-position:0px top;
56  }
57  75%{
58    background-position:0px bottom;
59  }
60  100%{
61    background-position:0px top;
62  }
63}
64/* 背景图片在组件内移动 */
65@keyframes change1{
66  0%{
67    background-position:left top;
68  }
69  25%{
70    background-position:50% 50%;
71  }
72  50%{
73    background-position:right bottom;
74  }
75  100%{
76    background-position:left top;;
77  }
78}
79```
80
81
82> **说明：**
83>
84> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
85
86![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)