简介

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个：

  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
  • fixed 当页面的其余部分滚动时，背景图像不会移动。
  • inherit 规定应该从父元素继承 background-attachment 属性的设置。ie 8不支持此属性值。

实现

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>滚动视觉差示例</title>

    <style>

        *{

            padding:0;

            margin:0

        }

        body{

            text-align:center;

            background-attachment:fixed;

        }

        #main{

            width: 1280px;

            height: 1600px;

            padding-top: 200px;

            margin:auto

        }

        .bg-attachment{

            height:700px;

            background:url(http://tupian.qqjay.com/u/2013/1127/19_222949_6.jpg) center center no-repeat;

            box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;

            -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;

            -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;

            -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;

            -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;

            background-attachment:fixed;

        }

        .div2{

            background:url(http://tupian.qqjay.com/u/2013/1127/19_222949_10.jpg) center center no-repeat;

            background-attachment:fixed;

        }

    </style>

</head>

<body>

    <div id="main">

        <div class="bg-attachment"></div>

        <div class="bg-attachment div2"></div>

    </div>

</body>

</html>

参考

http://www.cnblogs.com/mofish/archive/2012/12/28/2837622.html

background-attachment 制造视差滚动效果案例的更多相关文章

  1. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  2. [Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  4. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  5. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  6. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  7. [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  9. CSS完成视差滚动效果

    一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...

随机推荐

  1. 吴裕雄--天生自然python学习笔记：python用 Bokeh 模块绘制我国 GDP 数据统计图

    现在我们把我国 1990 年到 2017 年的 GDP 数据抓取出 来,井用 Bokeh 绘 出散点统计图 . 由网页爬取所需数据,并用 Bokeh 绘制散点图 . import requests # ...

  2. 吴裕雄--天生自然 HADOOP大数据分布式处理：添加主机和服务器的域名映射

  3. mysql安装后，进DOS输入命令mysql，提示错误：mysql ERROR 1045 (28000)的解决办法

    一.修改my.ini文件,并重启mysql服务 找到配置文件my.ini  ,然后将其打开,可以选择用记事本打开 打开后,搜索mysqld关键字,找到后,在mysqld下面添加skip-grant-t ...

  4. django框架进阶-auth认证系统-长期维护

    ##################    django的认证系统     ####################### 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要 ...

  5. 概率/期望DP初步——BZOJ1415 聪聪和可可

    期望相关: 数学期望,可以简单理解的加权平均数.设有一系列的值$x_i$,每个值被取到的概率为$p_i$,则期望$E=\sum\limits_{i=1}^n p_i x_i$. 期望具有线性性:$$E ...

  6. python2下经典爬虫（第一卷）

    python2.7的爬虫个人认为比较经典在此我将会用书中的网站http://example.webscraping.com作为案例 爬虫第一步:进行背景调研 了解网站的结构资源在网站的robots.t ...

  7. 事件和异常的传播 · 农场主的黑科技.

    inBound事件的传播 何为inBound事件以及ChannelInboundHandler ChannelRead事件的传播ChannelRead是典型的inbound事件,以他为例了解inbou ...

  8. Modelsim自动化仿真之do文件书写

    创建本地库 vlib ./work You must use vlib rather than operating system commands to creat a library directo ...

  9. 吴裕雄--天生自然python学习笔记：Python3 正则表达式

    Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参 ...

  10. Python---12函数式编程------12.3匿名函数&装饰器&偏函数

    一.匿名函数 当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便. 在Python中,对匿名函数提供了有限支持.还是以map()函数为例,计算f(x)=x2时,除了定义一个f( ...