简介

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. 次小生成树题（k） poj1679The Unique MST

    http://poj.org/problem?id=1679 #include<iostream> #include<vector> #include<cstdio> ...

  2. 3dmax2012卸载/安装失败/如何彻底卸载清除干净3dmax2012注册表和文件的方法

    3dmax2012提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2012失败提示3dmax2012安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  3. Linux安装swoole拓展 (一键安装lnmp后安装可用完美)

    一键安装lnmp后安装可用完美 swoole(一键安装完lnmp重启下,之前出现502一直解决不了,不清楚啥情况) 找到对应php版本,在lnmp文件夹的src 1.安装swoole cd /usr/ ...

  4. 【Java集合】试读ArrayList源码

    ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, ...

  5. Win32下双缓冲绘图技术

    一:双缓冲原理 为了解决窗口刷新频率过快所带来的闪烁问题,利用双缓冲技术进行绘图.所谓双缓冲技术,就是将资源加载到内存,然后复制内存数据到设备DC(这个比较快),避免了直接在设备DC上绘图(这个比较慢 ...

  6. Android开发之《ffmpeg解码mjpeg视频流》

    MJPEG格式和码流分析,MJPEG格式的一些简介 FFmpeg解码USB摄像头MJPEG输出:http://blog.csdn.net/light_in_dark/article/details/5 ...

  7. Java程序、JSP以及JavaScript中如何判断某个字符串是否包含某个子串

    1.JSP str:原始字符串, subStr:要查找的子字符串 <c:if test="${fn:contains(str,subStr)==true}"> < ...

  8. JSP9个内置对象和3个常用指令

    一.9个内置对象: 1.request对象客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.2.response对象包含了响应客户请求的有关信息,但在JSP中很少 ...

  9. 利用Load命令将本地文本里面的数据导入到MySQL数据库

    摘要:在使用MySQL是我们可能会遇到要向我们的表中插入大量的数据如果都使用以下的语句在命令行输入有点不太切实际,幸好MySQL为我们提供了LOAD命令可以批量的从本地文件向MySQL表中导入数据! ...

  10. Spring 中的 JDBCTemplate

    新建一个java工程 写好spring配置文件,直接上代码 <?xml version="1.0" encoding="UTF-8"?> <b ...