通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。

收起

自动换行

深色代码主题

复制

```
1. <!-- xxx.hml -->
2. <div class="container">
3. <div class="content"></div>
4. <div class="content1"></div>
5. </div>
```

收起

自动换行

深色代码主题

复制

```
1. /* xxx.css */
2. .container {
3. height: 100%;
4. background-color:#F1F3F5;
5. display: flex;
6. flex-direction: column;
7. justify-content: center;
8. align-items: center;
9. width: 100%;
10. }
11. .content{
12. width: 400px;
13. height: 400px;
14. /* 不建议图片长宽比为1:1 */
15. background-image: url('common/images/bg-tv.jpg');
16. background-size: 100%;
17. background-repeat: no-repeat;
18. animation: change 3s infinite;
19. border: 1px solid black;
20. }
21. .content1{
22. margin-top:50px;
23. width: 400px;
24. height: 400px;
25. background-image: url('common/images/bg-tv.jpg');
26. background-size: 50%;
27. background-repeat: no-repeat;
28. animation: change1 5s infinite;
29. border: 1px solid black;
30. }
31. /* 背景图片移动出组件 */
32. @keyframes change{
33. 0%{
34. background-position:0px top;
35. }
36. 25%{
37. background-position:400px top;
38. }
39. 50%{
40. background-position:0px top;
41. }
42. 75%{
43. background-position:0px bottom;
44. }
45. 100%{
46. background-position:0px top;
47. }
48. }
49. /* 背景图片在组件内移动 */
50. @keyframes change1{
51. 0%{
52. background-position:left top;
53. }
54. 25%{
55. background-position:50% 50%;
56. }
57. 50%{
58. background-position:right bottom;
59. }
60. 100%{
61. background-position:left top;
62. }
63. }
```

说明

background-position仅支持背景图片的移动，不支持背景颜色（background-color）。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5b/v3/8J_qBGOfSaq0dLAKw_Mkaw/zh-cn_image_0000002571291751.gif?HW-CC-KV=V1&HW-CC-Date=20260414T040249Z&HW-CC-Expire=86400&HW-CC-Sign=5F47C16CEED7F172BE1C8F4B8681B8BB8495D2D34EEE74C2DB09836DE4AE726A)