前提是定义了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. JavaScript怎么上传图片

    JavaScript怎么上传图片 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有 ...

  2. ASP.NET MVC4简单使用ELMAH记录系统日志

    ASP.NET MVC4简单使用ELMAH记录系统日志 前言 在项目开发.测试以及已经上线的项目中都会存在bug,而如果我们在项目的各个阶段都能及时的监控系统出现的任何问题,那么对于我们开发人员来说完 ...

  3. OC-变量和数据类型

    对象的初始化 Fraction *myFract=[[Fraction alloc] init];//初始化对象 [myFract setTo:1 over:3];//设置初始值 初始化对象和设置初始 ...

  4. 彩蛋 Python之道

    彩蛋 Python之道 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 使用下面的语句可以调出Python中的一个彩蛋, impo ...

  5. poj 3897 Maze Stretching 二分+A*搜索

    题意,给你一个l,和一个地图,让你从起点走到终点,使得路程刚好等于l. 你可以选择一个系数,把纵向的地图拉伸或收缩,比如你选择系数0.5,也就是说现在上下走一步消耗0.5的距离,如果选择系数3,也就是 ...

  6. Facebook开源的基于SQL的操作系统检测和监控框架:osquery daemon详解

    osqueryd osqueryd(osquery daemon)是可以定期执行SQL查询和记录系统状态改变的驻守程序. osqueryd能够根据配置手机归档查询结果,并产生日志. 同时也可以使用系统 ...

  7. angularjs控制器之间通信，事件通知服务

    service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...

  8. .Net程序员学用Oracle系列(2)：准备测试环境

    <.Net程序员学用Oracle系列:导航目录> 本文大纲 1.创建说明 1.1.为什么要创建的测试环境? 1.2.了解 Oracle 实例的默认用户 2.创建环境 2.1.创建基本环境 ...

  9. 基于AFNetworking 3.0的取消已发出的网络请求

    一般情况下主动取消请求的需求不会太多 除非以下几种情况 1.比如电商应用为例 请求频繁,数据量大 2.对性能的要求比较高 3.网络环境比较差 当一个用户打开一个界面 看到的却是漫长的等待框 这时候用户 ...

  10. LeetCode题解 15题 第二篇

    之前写过一篇,这是第二篇.上一篇用了多种编程语言来做,这一次是以学算法为主,所以打算都用python来完成. 4. Median of Two Sorted Arrays There are two ...