前提是定义了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. jQuery LigerUI V1.2.2

    jQuery LigerUI V1.2.2 (包括API和全部源码) 发布 前言 这次版本主要对树进行了加载性能上面的优化,并解决了部分兼容性的问题,添加了几个功能点. 欢迎使用反馈. 相关链接 AP ...

  2. 转-Linux系统下安装rz/sz命令及使用说明

    时间: 2013/03/20 | 分类: Linux常用命令 | 作者: 李坏 | 浏览:39,146 | 评论:5   对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务 ...

  3. Machine Learning/Introducing Logistic Function

    Machine Learning/Introducing Logistic Function 打算写点关于Machine Learning的东西, 正好也在cnBlogs上新开了这个博客, 也就更新在 ...

  4. MFC控件(8):command button与syslink control

    在VS 2008里MFC多了4种控件,分别是 split buttons ,command button , syslink controls和 network address controls. s ...

  5. Linux kernel中网络设备的管理

    kernel中使用net_device结构来描述网络设备,这个结构是网络驱动及接口层中最重要的结构.该结构不仅描述了接口方面的信息,还包括硬件信息,致使该结构很大很复杂.通过这个结构,内核在底层的网络 ...

  6. jvm工具

    jvm工具 知识,经验是基础,数据是依据,工具是运营知识处理数据的手段 数据:运行日志.异常堆栈.GC日志.线程快照.堆转存储快照 JPS:虚拟机进程状况工具 jvm process status t ...

  7. C#异步的世界【上】

    新进阶的程序员可能对async.await用得比较多,却对之前的异步了解甚少.本人就是此类,因此打算回顾学习下异步的进化史. 本文主要是回顾async异步模式之前的异步,下篇文章再来重点分析async ...

  8. this和$(this)

    this指的是javascript对象而$(this)就是就jquery对象 jQuery.prototype.test=function(){ this.css("color", ...

  9. 如何把微信语音汇总成一个MP3文件？

    有的时候想要保存微信中的语音内容,但是苦于语音短且多,因此想要把它汇总成一个音频文件. 本篇以苹果手机为例,安卓手机也可类似. 第一步,安装同步助手 同步助手是一款在电脑上安装,可以保存手机上的内容的 ...

  10. 分别使用Hadoop和Spark实现二次排序

    零.序(注意本部分与标题无太大关系,可直接调至第一部分) 既然没用为啥会有序?原因不想再开一篇文章,来抒发点什么感想或者计划了,就在这里写点好了: 前些日子买了几本书,打算学习和研究大数据方面的知识, ...