设置为fixed属性，背景相对于屏幕窗口固定，然后如果有一张全屏的图片，再来一张全屏的图片，就可以看到与平时滚动屏幕不同的切换图片。代码
CSS部分：

html, body,.content{

        height: 100%;

}

h2, body { margin: 0;}

.fixed-bg {

        position: relative;

        background-size: cover;

        background-attachment: fixed;

        height: 100%;

        background-position: center center;

}

.bg-1 {

         background-image: url("images/cd-background-1.jpg");

}

.container {

        padding: 23% 1%;

           background-color: #C7ABAB;

           height: 100%;

}

.bg-2 {

        background-image: url("images/cd-background-2.jpg");

}

HTML部分：

<div class="main content">

        <div class="fixed-bg bg-1">

                <h2>此处是图片</h2>

        </div>

        <div class="fixed-bg bg-2">

                <h2>又一张图片</h2>

        </div>

</div>

由此可以想到：如果图片之间加上内容 ，就会是比较新鲜的滚动方式：

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style type="text/css">

        html, body,.content{

                height: 100%;

        }

        h2, body { margin: 0;}

        .fixed-bg {

                position: relative;

                background-size: cover;

                background-attachment: fixed;

                height: 100%;

                 background-position: center center;

        }

        .bg-1 {

                 background-image: url("images/cd-background-1.jpg");

        }

        .container { padding: 23% 1%;

                    background-color: #C7ABAB;

                    height: 100%;}

        .bg-2 {

                 background-image: url("images/cd-background-2.jpg");

        }

        </style>

</head>

<body>

        <div class="main content">

                <div class="fixed-bg bg-1">

                        <h2>此处是图片</h2>

                </div>

                <div class="scrolling-bg">

                        <div class="container">

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>

                        </div>

                </div>

                <div class="fixed-bg bg-2">

                        <h2>又一张图片</h2>

                </div>

                <div class="scrolling-bg">

                        <div class="container">

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>

                        </div>

                </div>

        </div>

</body>

</html>

background-attachment:fixed应用的更多相关文章

  1. [转]滚动视差？CSS 不在话下/background attachment

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

  2. 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...

  3. background属性的学习整理转述

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  4. css 背景 background

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  5. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  6. absolute vs fixed

    <!DOCTYPE html> <html> <head> <title>absolute和fixed的区别</title> <sty ...

  7. 神奇的background

    background:url() fixed ....  可以实现页面向下滚动时背景图片 保持位置不变   感觉好像背景在随鼠标滚动而滚动一样

  8. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  9. CSS--background

    它的组合写法: background-color, background-image, background-repeat,backgroundattachment, background-posit ...

  10. CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

    Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...

随机推荐

  1. [翻译]ASP.NET Web API 2入门

    原文:Getting Started with ASP.NET Web API 2 Step 1:新建一个Empty的Web API Project. Step 2:添加一个Model: public ...

  2. ASP.NET全局文件与防盗链

    添加Web→全局应用程序类,注 文件名不要改 Global.asax 全局文件是对Web应用声明周期的一个事件响应的地方,将Web应用启动时初始化的一些代码写到 Application_Start中, ...

  3. discuz注册 内部错误

    ucenter整合后,在论坛注册时出现 内部错误,无法显示,这是因为ucenter中,某个appid没写入! 可以把ucenter安装包下的utilities/checkappid.php,复制到uc ...

  4. ubuntu fcitx 安装 使用

    系统内置的ibus的86五笔,感觉有些老不太好用, 所以安装试用了一下fcitx下的五笔,记录一下安装方法 ,各种搜索... 我的ubuntn版本: #48-Ubuntu SMP Fri Aug 24 ...

  5. 程序员的编辑器——VIM

    from:http://blog.chinaunix.net/uid-11278770-id-148579.html Chinaunix首页 | 论坛 | 认证专区 | 博客 登录 | 注册      ...

  6. obj-c 坑

    BOOL,使用8位存储空间,具有YES和NO值,如果赋值微长于8位的变量,那么只有低位字节会用作BOOL值,例如8960=0x2300,低8位为0,BOOL为NO.

  7. PHP - PHPExcel操作xls文件

    读取中文的xls.csv文件会有问题,网上找了下资料,发现PHPExcel类库好用,官网地址:http://phpexcel.codeplex.com/ 1.读取xls文件内容 <?php // ...

  8. WebService学习整理（一）——客户端三种调用方式整理

    1 WebService基础 1.1 作用 1,       WebService是两个系统的远程调用,使两个系统进行数据交互,如应用: 天气预报服务.银行ATM取款.使用邮箱账号登录各网站等. 2, ...

  9. Mybatis 学习

    1.  Mybatis 中 # 与 $ 符号的区别: a.    #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号. 如:order by #user_id#,如果传入的值是12,那么解 ...

  10. ubuntu 10.04 安装qt 5.0.2

    转自ubuntu 10.04 安装qt 5.0.2 从qt project网站下载下来最新的qt5.0.2套件,发现是个.run文件,添加x属性,然后直接sudo ./****.run, 提示  /l ...