请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2024-1-15 10:46 编辑
以下示例展示背景图片的滚动,其中,滑杆改变背景图片的位置(background-position),复选按钮改变背景图片的重复属性(background-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关键帧动画,这样就可以实现背景图片不间断无缝滚动(楼下展示)。
|