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

取值：

scrool:默认值，背景随页面滚动而移动，即背景和内容绑定。

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

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

  1. CSS background 属性全家桶

    介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...

  2. css中background背景属性概

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

  3. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  4. CSS background 属性 总结

    CSS background 属性总结

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

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

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

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

  7. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  8. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

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

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

  10. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

随机推荐

  1. 使用STL处理分支限界法处理最优装载问题

    使用STL处理分支限界法处理最优装载问题 #include <iostream>#include <vector>#include <queue>#include ...

  2. 搜索广告与广告网络Demand技术-搜索广告

    搜索广告 搜索广告就是一个典型的Ad Network,但是搜索广告非常重要,它的收入非常高,所以它有其独特之处,复杂度也比展示广告要高.它与展示广告在点击率预测,检索部分差不多,它的特点:1. 用户定 ...

  3. QzzmServer v2.0正式版发布

                                 V2.1升级程序已发布,具体见下文                                首先,感谢网友的热情的测评及反馈,现Qzzm ...

  4. springMVC之数据传递

    在前面介绍过从controller中向页面中传数据,可以通过HttpServletRequest进行setAttribute可以将数据放入request中.并且可以在jsp页面使用el表达式获取数据. ...

  5. [置顶] cuzy sdk之起源

    程序员都熟知一句话, “不要重复制造轮子".应该说互联网的繁荣和普及给刚入门的软件工程师还是带来很大的好处的.尤其是github,sourceforge在国内日渐的流行. 在学习iOS和an ...

  6. 人生在于折腾:php实现下载导出xx.tar.gz

    刚接到这样的需求,其实我是拒绝的.我甚至很有耐心地和pm商量,扔个csv不就好了么? pm:对方需要一个csv打包成.tar.gz的包,他们是linux server,这是硬性要求. 然后我开始折腾之 ...

  7. Js-Html 前端系列--checkbox

    今天搞全选按钮,设置Checkbox的时候,处于Checked状态但是不显示勾.最后得出解决方案: var c = boxcList.eq(i).attr("checked"); ...

  8. [ios2]发布时去除NSLog打印

    #if DEBUG #warning NSLogs will be shown #else #define NSLog(...) {} #endif

  9. （细节控）swift3.0与融云IMKIT开发问题（一部分） override func onSelectedTableRow Method does not override any method from its superclass

    原官网文档方案如下,在swift3.0的情况下出现 override func onSelectedTableRow  Method does not override any method from ...

  10. win10的IIS配置

    安装IIS: 控制面板---程序---启用或关闭windows功能---Internet Information Services IIS  和 IIS 可承载的web核心 有何区别?  是否两个都必 ...