CSS实现单图背景不间断滚动演示及说明

马黑黑

以下示例展示背景图片的滚动，其中，滑杆改变背景图片的位置（background-position），复选按钮改变背景图片的重复属性（background-repeat）：

background-position :

0px

background-repeat :

no-repeat

【附】

一、红色边框div的CSS核心代码：

#mydiv {
	width: 600px;
	height: 400px;
	border: 1px solid red;
	background: url('https://638183.freep.cn/638183/t22/hl/229.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

二、设置说明：

（一）盒子无需过多关心背景图片的实际宽高，因为我们使用 background-size: 100% 100%; 强制背景图片按盒子宽高尺寸呈现，图片将全影显示，虽然可能会有点比例失调。一般的建议是，盒子宽高和图片实际宽高最好是正比关系，至少不要有太大的误差。

（二）要让背景图片无间断衔接着滚动，需要将 background-repeat 属性设置为 repeat （或根据需要设置为 repeat-x 、 repeat-y ），原因是，只有设置为背景重复，背景位置改变到一定程度时才不会断档，从而实现不间断滚动。但要实现无缝衔接的话，需要图片的支持，具体说就是，图片的左右区域相似或相同（水平滚动时）或图片的上下区域相似或相同（垂直滚动时），可以很容易地使用作图软件对图片进行简单加工以满足此要求。

（三） background-position 属性是滚动的关键，它设置背景图片X方向和Y方向的位置， 0 0 表示背景图片始于盒子的左上角，然后，令 background-position 的值按盒子的尺寸改变，比如水平移动，示例盒子的宽度是 600px ，则，如果往 -600px 改变，背景图片将自右向左滚动，反之，如果往 600px 改变，背景图片将自左向右滚动。

（四）在以上思路基础上，可以为 background-position 设置CSS关键帧动画，这样就可以实现背景图片不间断无缝滚动（楼下展示）。

马黑黑

马黑黑

二楼效果代码

1. <style>
   
2. #bgmovebox {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 576px;
   
6.         border: 1px solid gray;
   
7.         background: url('https://638183.freep.cn/638183/t22/hl/230.png');
   
8.         background-repeat: repeat;
   
9.         background-size: 100% 100%;
   
10.         background-position: 0 0;
    
11.         animation: mov 20s infinite linear;
    
12.         position: relative;
    
13. }
    
14. 
    
15. @keyframes mov {
    
16.         to { background-position: -1024px 0; }
    
17. }
    
18. </style>
    
19. 
    
20. <div id="bgmovebox"></div>

复制代码

这里，盒子和图片的尺寸，高度一致，宽度 盒子:图片=1:2

马黑黑

背景滚动早些时候我有过介绍，不过可能当时没有说得像现在解释的那么清晰

庶民

我学了几天，太难了。

马黑黑

醉美水芙蓉 发表于 2024-1-15 11:38
谢谢黑黑老师分享教程！

马黑黑

庶民 发表于 2024-1-15 11:10
我学了几天，太难了。

如果没有较为全面的基础，学起来会有点慢。不过一切靠积累，过了一些坎之后，一切都将很明朗。

起个网名好难

马黑黑 发表于 2024-1-15 10:48
二楼效果代码

这里，盒子和图片的尺寸，高度一致，宽度 盒子:图片=1:2

                               
登录/注册后可看大图

亚伦影音工作室

这个不错实现了无缝对接滚动！

红影

这个特别好，我知道我前面的那个帖子应该怎么修改了

红影

这个好像以前有过背景滚动的帖子，我去找找。。。

红影

翻到了，也是用background-position的改变来实现的

红影

无缝动态背景
https://www.huachaowang.com/foru ... 57836&fromuid=2
(出处: 花潮论坛)
无题（致东篱闲人）
https://www.huachaowang.com/foru ... 57833&fromuid=2
(出处: 花潮论坛)

马黑黑

红影 发表于 2024-1-15 15:25
无缝动态背景
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57836&fromuid=2
(出处: 花潮 ...

是吧？我有印象介绍过的

马黑黑

红影 发表于 2024-1-15 14:48
这个特别好，我知道我前面的那个帖子应该怎么修改了

这个，一楼的演示，会帮助理解

马黑黑

红影 发表于 2024-1-15 15:00
翻到了，也是用background-position的改变来实现的

就是用这个属性的

马黑黑

红影 发表于 2024-1-15 14:52
这个好像以前有过背景滚动的帖子，我去找找。。。