设置为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. HDU 3008 Warcraft（DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3008 题目大意:人有100血和100魔法,每秒增加 t 魔法(不能超过100).n个技能,每个技能消耗 ...

  2. Poj 1511 Invitation Cards(spfa)

    Invitation Cards Time Limit: 8000MS Memory Limit: 262144K Total Submissions: 24460 Accepted: 8091 De ...

  3. javaIo流实际应用

    /*查看目录下所有的文件*/ package cn.file; import java.io.File; public class Text2 { public static void main(St ...

  4. mybatis（）

    ---------------------------------mysql分页---------------------------------- public void selectList(in ...

  5. VS建立可供外部调用的MFC类DLL，C#调用MFC调用

    建立MFC DLL工程.一般选共享MFC库 关键是在你生成的CPP中,添加外部调用的接口 如下,意思是将这个函数对外公开. 如果你希望对外提供类,就把这个方法做成工厂. 如果你希望对外提供MFC的窗体 ...

  6. C# MySql 操作类

    /* MySql 类 */ using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  7. python学习--string

    1\string are immutable, which means you can't change an existing string. >>>greeting = 'Hel ...

  8. Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架

    Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架   本章节,我将通过示例介绍如何搭建mvvmlight开发环境.示例中的我会针对wpf ...

  9. 安装pip之后，执行pip，提示：unknown or unsupported command install

    安装pip之后,在dos命令框中输入pip,提示:unknown or unsupported command install,搜索之后,立马在:http://stackoverflow.com/qu ...

  10. Django下TemplateDoesNotExist 异常的解决方法：

    在settings中添加代码如下获取templates路径: import os import os.path BASE_DIR = os.path.dirname(os.path.dirname(_ ...