简介

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. OpenAL介绍

    OpenAL(Open Audio Library)是自由软件界的跨平台音效API,由Loki Software,使用在Windows.Linux 系统上,用在音效缓冲和收听中编码. OpenAL设计 ...

  2. 基于Python的Flask基础知识

    Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...

  3. deeplearning.ai 神经网络和深度学习 week1 深度学习概论

    1. 预测房价.广告点击率:典型的神经网络,standard NN. 图像:卷积神经网络,CNN. 一维序列数据,如音频,翻译:循环神经网络,RNN. 无人驾驶,涉及到图像.雷达等更多的数据类型:混合 ...

  4. 每天一点Linux-01文档系统

    Windows: 以多根的方式组织文档 C: D: E:Linux: 以单根的方式组织文档 / /目录结构: FSH (Filesystem Hierarchy Standard) [root@yan ...

  5. OpenCVSharp对图像进行颜色分割

    使用OpencvSharp的InRange函数对图像进行RGB颜色的分割. using System; using OpenCvSharp; using OpenCvSharp.Extensions; ...

  6. Golang Interface 解析

    转自 https://zhuanlan.zhihu.com/p/27652856 先看一段代码: 123456789101112 func (x interface{}) { if x == nil ...

  7. 挑战中英实时语音翻译——Skype Translator 中文预览版登陆中国

    Translator 中文预览版登陆中国" title="挑战中英实时语音翻译--Skype Translator 中文预览版登陆中国"> 今天,我们正式宣布在中国 ...

  8. Spring Boot 之 Redis详解

    Redis是目前业界使用最广泛的内存数据存储. Redis支持丰富的数据结构,同时支持数据持久化. Redis还提供一些类数据库的特性,比如事务,HA,主从库. REmote DIctionary S ...

  9. 云服务器 ECS--查找公网ip使用终端连接云服务

    前段时间购买了阿里云服务器,购买之后一直没用使用,今天来操作一波,可谓一波三折,只能说,不看他们的操作指南你可能连地方都找不到,所以,在这里,我想给初次购买阿里云服务的童鞋门,写写我是怎么使用阿里云服 ...

  10. Django ORM必会13条之外的查询方法

    基于双下划线的查询 # 价格 大于 小于 大于等于 小于等于 filter(price__gt=') # 筛选出大于90 filter(price__lt=') # 筛选出小于90 filter(pr ...