前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

取值：

scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。

fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。

local：背景图相对于元素内容固定，

inhert:继承，没什么说的。

该属性可以应用于任何元素。

一、scroll【背景图滚动】

设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。

local

Note:

对于scroll，一般情况背景随内容滚动，但是有一种情况例外。

对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

二、local【滚动元素背景图滚动】

对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。

因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

<style>

div{

    width: 200px;

    height: 350px;

    border: 1px solid red;

    background-image: url(img/img_tree.png);

    background-repeat: no-repeat;

    background-attachment: local;

    overflow: scroll;

    line-height: 1.5;

}

</style>

<body>

    <div>

    1内容超出会出现滚动条

    2内容超出会出现滚动条

    3内容超出会出现滚动条

    4内容超出会出现滚动条

    5内容超出会出现滚动条

    6内容超出会出现滚动条

    7内容超出会出现滚动条

    8内容超出会出现滚动条

    9内容超出会出现滚动条

    10内容超出会出现滚动条

    11内容超出会出现滚动条

    12内容超出会出现滚动条

    13内容超出会出现滚动条

    14内容超出会出现滚动条

    15内容超出会出现滚动条

    16内容超出会出现滚动条

    17内容超出会出现滚动条

    18内容超出会出现滚动条

    19内容超出会出现滚动条

    20内容超出会出现滚动条

    </div>

</body>

三、fixed:【背景图静止】

背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。

fixed用法如下：

<style>

body{

    background-image: url(img/cartooncat.png);

    background-position: bottom left;

    background-attachment: fixed;

    background-repeat: no-repeat;

    height: 1000px;

}

</style>

</head>

<body>

    <h1>下拉看效果：</h1>

</body>

或者看mozilla的demo。

这里我要强调一点我的看法：

给任何元素的背景图设置background-attachment: fixed;效果都是一样的，都是相对于视口，因为一个网页只有一个视口，该背景和元素已经没关系了，要说有关大概也只是元素不可见则背景图不可见。

而这个视口是什么呢？这里推荐一篇文章《像素与浏览器视口的细节》

四、多背景图background-attachment

也可以为多个背景图设置background-attachment

body {

  background-image: url("img1.png"), url("img2.png");

  background-attachment: scroll, fixed;

}

五、资源链接

w3c background-attachment

像素与浏览器视口的细节

a table of two viewports

background-attachment属性进阶的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  3. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  6. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  7. background相关属性

    background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...

  8. background——背景属性

    一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...

  9. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  10. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

随机推荐

  1. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  2. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  3. 《JavaScript 代码优化指南》

      ~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> &l ...

  4. .NET框架解决的问题

    面向对象开发环境 自动垃圾收集 互操作性 不需要COM 简化部署 类型安全 基类库

  5. C++ 最小化到托盘

    #define WM_SHOWTASK (WM_USER + 1) void CTestDlg::OnSysCommand(UINT nID, LPARAM lParam) { if ((nID &a ...

  6. redis成长之路——（四）

    加强redis连接的连接池 虽然StackExchange.Redis针对连接已经做了很多工作,不过在实际应用场景中还是不够的,比如多实例的vip就会导致只能连到其中一个实例上等:本实例中的连接池只能 ...

  7. mongo DB for C#

    (1)Download the MongoDB C#驱动. http://www.nuget.org/packages/mongocsharpdriver/. (2) Add Reference to ...

  8. ICSharpCode.SharpZipLib 压缩、解压文件 附源码

    http://www.icsharpcode.net/opensource/sharpziplib/ 有SharpZiplib的最新版本,本文使用的版本为0.86.0.518,支持Zip, GZip, ...

  9. Python input 使用

    Python 3.0 中使用"input" , Python 2.0 中使用"raw_input"Python 3.5: #!C:\Program Files\ ...

  10. java中如何实现多态

    复习基础知识 多态,就是重载和重写.重载发生在一个类中.重写发生在子类,意思就是子类重写父类相同名称的方法.刚学语言有的东西,不必搞得那么清楚,只有知道怎么用就行了,有的问题你要想真正把它搞得很懂,短 ...