简介

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学习笔记：Matplotlib 基本绘图

    使用 Matplotlib 组件绘图时,经常要与 Numpy 组件搭配使用 . 使用 Matplotlib 绘图首先要导入 Matplotlib 组件 , 由于大部分绘图功能是在 matplotlib ...

  2. 为Nginx启用目录浏览功能

    今天工作需要,要给客户提供一个patch的下载地址,于是想用nginx的目录浏览功能来做,需要让客户看到指定一个目录下的文件列表,然后让他自己来选择该下载那个文件: 我们都知道在apache下可以配置 ...

  3. bootstrap实现多选项及回显

    1.前端 <link rel="stylesheet" href="${ctxStatic}/js/bootstrap-select-1.12.2/dist/css ...

  4. Qt QString与int的转换

    QString转int QString a=" ; int b; b=a.toInt();   int 转 QString ; QString b; b=QString::number(a)

  5. 详解JavaScript Document对象

    转自:http://segmentfault.com/a/1190000000660947 在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是d ...

  6. js - 常用的继承

    零.序言 参考资料:JavaScript常用八种继承方案: 注:1.此篇笔记是站在上述资料的肩膀上的一篇小结: 2.阅读之前建议温习一下 js 中的 prototype 和 constructor:( ...

  7. SpringMVC学习笔记五:HandlerExceptionResolver异常处理

    继承HandlerExceptionResolver自定义异常处理器 控制器ExceptionController.java package com.orange.controller; import ...

  8. Rails （栈）

    题目链接:https://vjudge.net/problem/UVA-514 题目大意: 有A,B,C三个火车停靠点,火车最初停在A站,给你一个序列,问你能不能通过中转站C到达B站,火车从A站进入到 ...

  9. OpenSSL编程之摘要

    说明: 数字摘要是将任意长度的消息变成固定长度的短消息,它类似于一个自变量是消息的函数,也就是Hash函数.数字摘要就是采用单向Hash函数将需要加密的明文“摘要”成一串固定长度(128位)的密文这一 ...

  10. 混乱中的ICO平台，会不会是下一个P2P的重灾区？

    当众多巨头和创业者还在为共享打车.共享单车.VR.IP化.互联网金融沉迷时,一种全新的"众筹"正在造就一个又一个暴富神话.其名为ICO,即首次代币众筹,一般指区块链初创项目在众筹平 ...