zoukankan      html  css  js  c++  java
  • 用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元素上支持。

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

  • 相关阅读:
    客户端配置文件tnsname.ora
    MVC3使用Area解耦项目
    系统中同时安装sql2005 和 sql2008 R2 提示要删除SQL Server 2005 Express
    sqlserver执行时间和自行效率
    sqlserver2008链接服务器中执行存储过程配置过程
    sqlserver中top 1 赋值的问题
    js跨域post请求
    uploadify 报http 302错误
    go 函数
    Node.js +Express+MongoDB+mogoose+ejs+bootstrap+jquery
  • 原文地址:https://www.cnblogs.com/2050/p/2848004.html
Copyright © 2011-2022 走看看