您现在的位置是:首页 > 文章详情

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

日期:2019-04-10点击:296

使用 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:纯色背景好像是无效的,必须是背景图

原文链接:https://my.oschina.net/u/3480701/blog/3034611
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章