• 用backgroundattachment:fixed做动画效果


    先看一下这个demo

    上下滚动这个demo页面(用IE6的可以先一边去),可以看到图片有切换的动画效果,感觉还挺先进的,但其实这个demo的页面的代码灰常简单,就是在几个div里放几张背景图片,然后把背景图片设为固定就行了。

    QQ截图20130106163332

    所以background-attachment:fixed真的是一个很神奇的东西,如果利用得好可以做出很炫的效果。下面就详细说下background-attachment属性。

    background-attachment的一些说明:

    background-attachment -- 定义背景图片随滚动轴的移动方式

    • 取值: scroll | fixed | inherit
      • scroll: 随着页面的滚动轴背景图片将移动
      • fixed: 随着页面的滚动轴背景图片不会移动
      • inherit: 继承初始值: scroll
    • 继承性: 否
    • 适用于: 所有元素

    取值为scroll的时候很好理解,就是背景会随着滚动条滚动。取值为fixed的时候,意思是固定背景,既然说了是固定,那么固定在哪里呢?这就要由background-position的值来决定了。我们知道background-position的值是相对某个区域来讲的,那么background-attachment为fixed的背景的background-position是相对于什么来说的呢,是背景所在的元素吗?不是,而是相对于浏览器视窗来说的,不管这个元素在什么地方,如果它的background-attachment为fixed,则它的背景的位置就与它本身无关了,因为它的背景始终是参照浏览器的可见视窗来定位的。当然,如果一个元素在浏览器可见视窗以外,但它的背景在浏览器视窗里面,那这个背景我们仍然是看不到的,只有这个元素出现在浏览器视窗以内,并且能被我们看到,才能看到它的背景。记住一点,background-attachment为fixed的背景永远不会动,即使元素本身动了,背景却还是停留在那里,而且它只会在它本来的元素上显示出来。

    绝大多数浏览器都支持background-attachment:fixed,但IE6除外。其实六爷也是支持background-attachment:fixed的,只不过不是在所有的元素上都支持,它老人家只在html和body元素上支持。

    就这些了,发挥下想象力,真的可以用这货弄出很洋气的东西。

  • 相关阅读:
    Word转pdf
    jquery 中json数组的操作 增删改
    Js、Jquery定时执行(一次或者重复多次,取消重复)
    sql server 2008 (不允许保存更改,您所做的更改要求删除并重新创建以下表) 的解决办法
    C#中 ArrayList 的使用
    Jquery正则表达式公式
    C#判断字符串是否存在字母及字符串中字符的替换实例
    纳闷的EF异常:在提供程序连接上启动事务时出错
    C# WinForm获取当前路径汇总
    Entity Framwork 6 编译出错的问题(VS2012)
  • 原文地址:https://www.cnblogs.com/2050/p/2848004.html
Copyright © 2020-2023  润新知