CSS实现单图背景不间断滚动演示及说明
本帖最后由 马黑黑 于 2024-1-15 10:46 编辑 <br /><br /><style>.pa { font: normal 20px/24px sans-serif; }
.pa p { margin: 10px 0; }
.pa pre { padding: 10px; background: #eee; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
#mydiv { margin: 20px auto; 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%; }
.Mid { display: flex; align-content: center; }
.Mid input, .Mid label, .Mid output { margin-right: 10px; }
.Mid output { color: red; }
.Mid label { color: blue; }
.pa mark { background: lightblue; }
</style>
<div class="pa">
<p>以下示例展示背景图片的滚动，其中，滑杆改变背景图片的位置（background-position），复选按钮改变背景图片的重复属性（background-repeat）：</p>
<div id="mydiv"></div>
<p class="Mid">
<label for="prog">background-position : </label>
<input id="prog" type="range" min="-600" max="600" value="0" />
<output id="rngmsg">0px</output>
</p>
<p class="Mid">
<label for="chkrepeat">background-repeat : </label>
<input id="chkrepeat" type="checkbox" value="repeat" />
<output id="repeatmsg">no-repeat</output>
</p>
<p>【附】</p>
<h2>一、红色边框div的CSS核心代码：</h2>
<pre>
#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;
}
</pre>
<h2>二、设置说明：</h2>
<p>（一）盒子无需过多关心背景图片的实际宽高，因为我们使用<mark> background-size: 100% 100%; </mark>强制背景图片按盒子宽高尺寸呈现，图片将全影显示，虽然可能会有点比例失调。一般的建议是，盒子宽高和图片实际宽高最好是正比关系，至少不要有太大的误差。</p>
<p>（二）要让背景图片无间断衔接着滚动，需要将<mark> background-repeat </mark>属性设置为<mark> repeat </mark>（或根据需要设置为<mark> repeat-x </mark>、<mark> repeat-y </mark>），原因是，只有设置为背景重复，背景位置改变到一定程度时才不会断档，从而实现不间断滚动。但要实现无缝衔接的话，需要图片的支持，具体说就是，图片的左右区域相似或相同（水平滚动时）或图片的上下区域相似或相同（垂直滚动时），可以很容易地使用作图软件对图片进行简单加工以满足此要求。</p>
<p>（三）<mark> background-position </mark>属性是滚动的关键，它设置背景图片X方向和Y方向的位置，<mark> 0 0 </mark>表示背景图片始于盒子的左上角，然后，令<mark> background-position </mark>的值按盒子的尺寸改变，比如水平移动，示例盒子的宽度是<mark> 600px </mark>，则，如果往<mark> -600px </mark>改变，背景图片将自右向左滚动，反之，如果往<mark> 600px </mark>改变，背景图片将自左向右滚动。</p>
<p>（四）在以上思路基础上，可以为<mark> background-position </mark>设置CSS关键帧动画，这样就可以实现背景图片不间断无缝滚动（楼下展示）。</p>
</div>
<script>
prog.oninput = () => {
rngmsg.value = prog.value + 'px';
mydiv.style.setProperty('background-position',prog.value + 'px 0');
};
chkrepeat.oninput = () => {
repeatmsg.value = chkrepeat.checked ? ' repeat' : ' no-repeat';
mydiv.style.setProperty('background-repeat', chkrepeat.checked ? 'repeat' : 'no-repeat');
};
</script>
<style>
#bgmovebox {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 576px;
border: 1px solid gray;
background: url('https://638183.freep.cn/638183/t22/hl/230.png');
background-repeat: repeat;
background-size: 100% 100%;
background-position: 0 0;
animation: mov 20s infinite linear;
position: relative;
}
@keyframes mov {
to { background-position: -1024px 0; }
}
</style>
<div id="bgmovebox"></div> 二楼效果代码
<style>
#bgmovebox {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 576px;
border: 1px solid gray;
background: url('https://638183.freep.cn/638183/t22/hl/230.png');
background-repeat: repeat;
background-size: 100% 100%;
background-position: 0 0;
animation: mov 20s infinite linear;
position: relative;
}
@keyframes mov {
to { background-position: -1024px 0; }
}
</style>
<div id="bgmovebox"></div>这里，盒子和图片的尺寸，高度一致，宽度 盒子:图片=1:2
背景滚动早些时候我有过介绍，不过可能当时没有说得像现在解释的那么清晰 我学了几天，太难了。 醉美水芙蓉 发表于 2024-1-15 11:38
谢谢黑黑老师分享教程！
{:4_190:} 庶民 发表于 2024-1-15 11:10
我学了几天，太难了。
如果没有较为全面的基础，学起来会有点慢。不过一切靠积累，过了一些坎之后，一切都将很明朗。 马黑黑 发表于 2024-1-15 10:48
二楼效果代码
这里，盒子和图片的尺寸，高度一致，宽度 盒子:图片=1:2
https://pic.rmb.bdstatic.com/bjh/down/0ef2b35c33169916c5826bfc2b143839.jpeg 这个不错实现了无缝对接滚动！ 这个特别好，我知道我前面的那个帖子应该怎么修改了{:4_199:} 这个好像以前有过背景滚动的帖子，我去找找。。。 翻到了，也是用background-position的改变来实现的{:4_173:} 无缝动态背景
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57836&fromuid=2
(出处: 花潮论坛)
无题（致东篱闲人）
https://www.huachaowang.com/forum.php?mod=viewthread&tid=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
这个好像以前有过背景滚动的帖子，我去找找。。。
{:4_181:}