设置为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. 暑假集训(1)第六弹 -----简单计算器（Hdoj1237)

    Description 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值.   Input 测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符,整数和运算 ...

  2. Qt 操作Excel

    Qt对Excel的数据读/写操作没有现存的类,需要使用QAxObject,下面是从网上下载下来的一个封装好的类,感觉还可以,一般情况下够用,拿来给大家分享. 头文件: #ifndef EXCELENG ...

  3. 九度OJ 1118 数制转换

    题目地址:http://ac.jobdu.com/problem.php?pid=1118 题目描述: 求任意两个不同进制非负整数的转换(2进制-16进制),所给整数在long所能表达的范围之内.   ...

  4. Invoke（）方法的使用

    在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直接调用界面控件的方法是错误的做法,Invoke 和 BeginInvoke 就是为了解决这个问题而出现的,使你在多线程中安全的更新界 ...

  5. php内存申请和销毁

    内存申请 ZendMM使用自身heap层申请内存追踪结果: ZEND_ASSIGN_SPEC_CV_CONST_HANDLER (......) -> ALLOC_ZVAL(......) -& ...

  6. Spring Mvc Controller间跳转 重定向 传参 (转)

    原文链接:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ 1. 需求背景     需求:spring MVC框架con ...

  7. python之PIL安装问题

    ··在windows安装模块 总是出现问题,今天安装PIL的 首先提示我的是pip命令出错,这应该是当你安装Python2.7的时候 并没有把pip模块添加进去 导致出现了这样的一个问题,为了省事,我 ...

  8. 安装mod_deflate模块启用apache的GZIP压缩

    安装mod_deflate模块启用apache的GZIP压缩 操作系统:Linux Cent OS 5 / Max OS X 10.6 snow leopard相关环境:Apache httpd 2. ...

  9. 安装 SQL Server 2005 的硬件和软件要求(官方全面)

    SQL Server 2005 安装要求 本主题介绍了安装 SQL Server 205 的硬件和软件要求,以及查看安装文档的说明. 硬件和软件要求(32 位和 64 位) 访问 SQL Server ...

  10. python 循环while和for in

    #!/uer/bin/env python # _*_ coding: utf-8 _*_ lucknumber = 5 b = 0 while b <3: print('guss count: ...