用background-attachment:local制作纯CSS的滚动阴影

问说网 · 发布于 2015-04-04 · 字数3167 · 浏览 1710 · 评论 0

几天前发现了一个很好的滚动示例,如果往下还有内容,那么就会在底部显示一个灰色的阴影,告诉用户可以继续往下面滚动,如果没有内容了那么,就不显示阴影,这个设计非常的有趣。

纯CSS3伪类制作滚动阴影与背景

Roman在他的尝试中,使用了绝对定位的伪元素(pseudoe element)去覆盖阴影(阴影是一个基本的放射渐变的背景图),再进一步讲,当我们滚动其内容的时候,背景是不随之滚动的,而绝对定位的元素则会随之 滚动。因此,当你滚动它的时候,阴影就会显示得越来越清楚。此外,这些伪元素是由白色到透明的线性渐变,因此这些阴影会很柔和的被覆盖。

但看到Roman的这个demo时,我在想,是否有可能不用额外的容器(包括伪元素)。这貌似是一个完美的background-attachment: local的用例。事实上,这也是我关于这一技术的第一个真实的用例。

“background-attachment……神马?我只知道scroll和fixed!”

scroll和fixed是CSS 2.1中background-attachment仅有的两个属性值。scroll是默认值,背景相对于其依赖的元素;而fixed则依赖于其视口(viewport),当页面滚动时,背景效果不会随之滚动,而是保留背景本来的位置,而基于这些定义,当页面只有一部分可滚动时(比如一个overflow: auto的div),其背景并不会随着容器的滚动而滚动。

Backgrounds & Borders Level 3中,新加入了一个值来打破这一限制:local。当background-attachment: local被应用时,背景相对于元素内容而放置。这一的结果就是,背景会随着内容的滚动而滚动。这已经不是一个新特性了,2005年Backgrounds and Borders 3的第一个草案时就已经有它了(当然,实现起来需要更多的时间,从2009年开始)。

眼见为实,我们来通过dabblet写个例子,把这三个属性值产生的效果集中展示一下(您的浏览器需要支持这些属性):

http://result.dabblet.com/gist/2494566/866ca6ee4812a9fdf17569c54cb5d637cccd9a3b

“好,我明白了。那么回到滚动阴影这个话题么?”

基本的思路就是将之前的绝对定位的伪元素作为一层背景放进其中,并赋予background-attachment: local的值。我试过了,工作正常,且省去了很多代码。这里是dabblet演示:

http://result.dabblet.com/gist/2462915/566ae1824313e87ae6123182d063b7c7a27286b4

他的缺点在于支持他的浏览器少了一点。如果把放射渐变的背景存成图片的话,Roman原本的尝试在IE8下都是可以工作的(渐变也不是这里的重点啦)。当你用到background-attachment: local的时候,你同时也把浏览器的支持范围缩小到了IE9+Safari 5+ChromeOpera。Firefox不在此列,这是值得留意的。如果你对有兴趣实现它的话,可以来这里:bug #483446

尽管如此,浏览器的支持并不重要,因为这一效果可以优雅降级。在不支持这一效果的浏览器中,我们看不到阴影就是了。

原文:http://lea.verou.me/2012/04/background-attachment-local/

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-10-21MathJax基于AJAX在WEB网页上显示数学公式
  • 2016-07-15十分钟搞清字符集和字符编码
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-03-18如何在Rails中基于Zepto使用Ajax异步加载
  • 2016-05-14无与伦比!30个精美绝伦的酒店网站设计
  • 2016-05-17AI教程!教你绘制扁平化风格的卡通人物肖像(四人组合篇)
  • 2016-06-06JavaScript中使用ID获取节点的思考
  • 发布评论

    为您推荐

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-03-05

    使用JS-Cookie的服务器端集成配置

    有一些服务器不符合RFC 6265。对于一些人物,不是由JavaScript cookie编码可能是不同的,在这里,我们的文件最重要的服务器端的特点及其解决方法…

    问说网 · 发布于 2016-06-06

    JavaScript数组元素的排序及洗牌算法

    这里利用了一个 sort 函数进行排序,可以看到,排序的是由匿名函数的返回值决定。 false 是正序, true 是逆序,0为不排序,随机则是随机结果。

    问说网 · 发布于 2016-07-04

    Trianglify唯美的几何图形背景生成插件

    Trianglify 是一个 SVG 背景图片生成器,主要是生成简单的集合图形,但是看起来非常好看,生成的 SVG 图片非常漂亮,支持将生成的图形导出为SVG和…

    详细讲解JAVA中的IO流
    Vincent · 发布于 2016-07-06

    详细讲解JAVA中的IO流

    包 java.io   文件路径 1. java.io.File是文件和目录路径名的抽象表示形式 2. 抽象路径名中的第一个名称是目录名,抽象路径名中…

    Vincent · 发布于 2016-07-06

    Oracle(ALL | DBA | USER)

    查看用户 查看所有的用户 select * from all_users; 查看dba的用户 select * from dba_users; 注:由于dba拥…

    JBoss下WebService开发
    Vincent · 发布于 2016-07-06

    JBoss下WebService开发

    JAVA EE为webService提供了两种不同的编程模式,EJB容器模式及web容器模式,EJB容器模式:在EJB项目的session bean类中实现。

    问说网 · 发布于 2016-07-07

    Fool.js恶搞整人网页特效jQuery插件

    Fool.js是一个 jQuery 插件,包含了几种页面特效,可以用来在愚人节的时候整人,来实现更多的更变态的愚人功能,当然你也可以使用这个插件完成更多好看的效…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    495 评论
    2047 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2659

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2500

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2554

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2026

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2222

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!