设置为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. Codevs 1225 八数码难题

    1225 八数码难题 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description Yours和zero在研究A*启发式算法.拿到一道经典的 ...

  2. Codevs 1904 最小路径覆盖问题

    1904 最小路径覆盖问题 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 大师 Master 传送门 题目描述 Description 给定有向图G=(V,E).设P 是G 的一个 ...

  3. bzoj1901：Zju2112 Dynamic Rankings

    思路:树套树,我写了两种,一种是线段树套splay,线段树维护区间信息,splay维护第k大,一种是树状数组套权值线段树(并不是什么可持久化线段树,只不过是动态开点罢了,为什么网上一大堆题解都是可持久 ...

  4. C语言程序设计概述

    1 概论 1972年Dennis Ritchie发明了C语言,而后Dennis Ritchie又使用C语言重写了Unix系统,自那以后C语言逐渐受到了全世界大多数编程爱好者的喜爱,后期的主流操作系统L ...

  5. 九度OJ 1371 最小的K个数 -- 堆排序

    题目地址:http://ac.jobdu.com/problem.php?pid=1371 题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4 ...

  6. Swift小功能点积累

    label字符加删除线 let label = UILabel(frame: CGRectMake(, , , )) let attr = NSMutableAttributedString(&quo ...

  7. Sublime Text3 个人使用心得

    sublime与webstorm的比较: webstorm真心很强大,强大到能够几乎满足所有前端开发者编程的需求,方便的快捷键操作.代码提示.浏览器查看.工程管理.历史记录(可以找到之前编辑的内容,即 ...

  8. checkbox在jquery版本1.9 以上用attr不可重复操作的问题【附解决方案】

    最近做个项目,需要重复多次更改checkbox的状态,使用jquery 1.10.2的最新版本时发现,对checkbox的选中状态无法多次选中.测试代码如下: <!DOCTYPE html PU ...

  9. js获取get方式提交的参数返回json格式数据

    /** * 获取GET提交的参数 * @return JSON格式 * @author Terry */ function getArgs(){ var args = {}; var match = ...

  10. 【javascript 引用类型（一）】

    javascript 的引用类型大致分为:Object 类型.Array 类型.Date 类型.RegExp 类型.Function 类型.基本包装类型和单体内置对象.这里我们着重介绍 Object ...