关于background-attachment: fixed 实现滚动视差的逻辑理解

原创
2019/04/10 14:09
阅读数 1.4K

使用 background-attachment: fixed 实现滚动视差

<section style="height: 300px;width:500px;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') fixed no-repeat;">IMG1</section>

以浏览器的视图窗口作为绘制区域绘制背景图片,所以背景图片相对于浏览器是fixed的,标签所占区域为可视区域,可视区域只是图片的一部分,当可视区域移动时(也就是被滚动),就会移动到图片的相应部分,就有了滚动视差效果。
用UI的理解就是把背景图放在画板上固定,在上面加一个蒙版,然后在蒙版上开一个口子,口子在哪你就能看到那里的部分图片。

还有scroll、local相对比较好理解

  • background-attachment : local 既然fixed是相对浏览器的,那local是相对于自己的,当自己的对子元素进行滚动时,背景也会进行移动
<div style="height: 300px;width:500px;overflow: auto;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') local no-repeat;">
        <section style="height: 300px;width:500px;">IMG2</section>
        <section style="height: 300px;width:500px;">IMG3</section>
</div>
  • background-attachment : scroll 就是最普通的模式,背景和内容视图是固定的。

ps:纯色背景好像是无效的,必须是背景图

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
4 收藏
1
分享
返回顶部
顶部