关于background-attachment: fixed 实现滚动视差的逻辑理解
使用 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:纯色背景好像是无效的,必须是背景图

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
探索Java日志的奥秘:底层日志系统-log4j2
前言 log4j2是apache在log4j的基础上,参考logback架构实现的一套新的日志系统(我感觉是apache害怕logback了)。 log4j2的官方文档上写着一些它的优点: 在拥有全部logback特性的情况下,还修复了一些隐藏问题 API 分离:现在log4j2也是门面模式使用日志,默认的日志实现是log4j2,当然你也可以用logback(应该没有人会这么做) 性能提升:log4j2包含下一代基于LMAX Disruptor library的异步logger,在多线程场景下,拥有18倍于log4j和logback的性能 多API支持:log4j2提供Log4j 1.2, SLF4J, Commons Logging and java.util.logging (JUL) 的API支持 避免锁定:使用Log4j2 API的应用程序始终可以选择使用任何符合SLF4J的库作为log4j-to-slf4j适配器的记录器实现 自动重新加载配置:与Logback一样,Log4j 2可以在修改时自动重新加载其配置。与Logback不同,它会在重新配置发生时不会丢失日志事件。 高级...
- 下一篇
15个最好用的JavaScript代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程。这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行。 在这篇文章中,我们选择了15个最好用的 JavaScript 压缩工具,有简单的在线转换器,GUI工具和命令行界面等。 1. JavaScript Minifier 它是一个很好的工具,带有API来缩小js代码。 2. JSMIni 如果您想快速轻松地缩小JavaScript或jQuery文件,请使用jsMini。只需复制和粘贴源代码,选择要基本压缩还是完全压缩,然后缩小代码。 3. JSCompress JSCompress.com是一个在线javascript压缩器,允许您压缩和缩小javascript文件。压缩的javascript文件是生产环境的理想选择,因为它们通常会将文件的大小减少30-90%。大多数文件大小的减少是通过删除Web浏览器或访问者不需要的注释和额外的空白字符来实现的。 4. Minifier 一个简化CSS/JS的简单工具,没有大的设置。它将CSS中的URL从原来的位置...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,CentOS8安装Elasticsearch6.8.6
- 2048小游戏-低调大师作品
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2全家桶,快速入门学习开发网站教程