简介

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. Java多线程基础详解

    基础概念进程进程是操作系统结构的基础:是一次程序的执行:是一个程序及其数据在处理机上顺序执行时所发生的活动.操作系统中,几乎所有运行中的任务对应一条进程(Process).一个程序进入内存运行,即变成 ...

  2. Tarjan相关

    先码住: 板子:http://www.cnblogs.com/luckycode/p/5255656.html 求割点/割边:http://www.cnblogs.com/c1299401227/p/ ...

  3. JDK源码看Java域名解析

    前言 在互联网中通信需要借助 IP 地址来定位到主机,而 IP 地址由很多数字组成,对于人类来说记住某些组合数字很困难,于是,为了方便大家记住某地址而引入主机名和域名. 早期的网络中的机器数量很少,能 ...

  4. SQL语言：DDL,DML,DCL,DQL,TCL

    DDL(Data Definition Language)数据库定义语言 statements are used to define the database structure or schema. ...

  5. SHELL用法三（变量及参数设置）

    京峰JF2115-Day45上课笔记 1.SHELL编程变量命名规范: 变量分为:系统变量.环境变量.用户变量: 定义变量时使用=赋值,无需通过declare定义变量的类型: 变量赋值时,=前后是不能 ...

  6. java的自增和自减

    class Untitled { public static void main(String[] args) { int a = 3; int b = a++; //a先赋值给b,然后a再自己加1 ...

  7. LVS + keepalived的实现

    ! Configuration File for keepalived global_defs { notification_email { linuxedu@foxmail.com mageedu@ ...

  8. 科学家用AI看月球后，却发现了这些东西

    ​​人工智能(AI)几乎已经无所不在,我们生活的大多数方面都已经被它们渗透,随着AI在过去几年取得的令人震惊的进步,它在许多方面都可能帮助我们的生活变得更美好.近日,AI在月球上发现了近7000个未被 ...

  9. 应对百万访问量的epoll模式

    写在前面 select/poll与epoll select/poll模型工作机理 select/poll模型的局限 epoll模型工作机理 epoll的局限 golang中的epoll golang源 ...

  10. Dockerfile创建zabbix监控体系

    使用for循环将zabbix的镜像导入到容器中 for n in `ls *.tar.gz`;do docker load -i $n ;done 使用docker运行zabbix-server do ...