设置为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. python 自动化之路 logging日志模块

    logging 日志模块 http://python.usyiyi.cn/python_278/library/logging.html 中文官方http://blog.csdn.net/zyz511 ...

  2. jQuery插件综合应用(四)头像设置

    一.操作流程 会员点击头像设置,弹出一个层,在层中,有上传图片的按钮,用户点击按钮上传图片,图片在服务器端按大小压缩保存(方便剪切).保存后,在前端显示,然后用户可修剪图片.选择图片区域,点击提交,保 ...

  3. dom三个事件

    1,页面加载后 window.onload=function(){}; 2,页面(关闭)卸载后触发 window.onunload=function(){}; 3,页面关闭前触发 window.onb ...

  4. HTML5 的绘图支持- canvas

    Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...

  5. Google v8 - Hello world

    OS:Window 7 1.下载v8 zip:https://github.com/v8/v8,解压zip,重命名v8-master文件夹为v8. 2.下载安装svn:http://tortoises ...

  6. 可视化查看MongoDB - MongoVUE

    OS:Window 7 1.下载安装MongoVUE:http://www.mongovue.com/downloads/ 2.运行MongoVUE,点击“OK”按钮,使用免费版 3.选择一个已经存在 ...

  7. poco异步等待ActiveResult

    #include "Poco/ActiveMethod.h"#include "Poco/ActiveResult.h"#include <utility ...

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

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

  9. iBatis入手案例

    第一部分,iBatis组织架构分析 1.1 组织架构图 1.2 架构分析 DAO层上面,DAO类通过SqlMapConfig文件,来构建iBatis提供的SqlMapClient,SqlMapConf ...

  10. android 布局如何支持多种不同屏幕尺寸

    android 布局如何支持多种不同屏幕尺寸 --关于dp.layout-xxx.drawable-xxx作用的小结 转载自:http://blog.csdn.net/vincent_blog/art ...