前提是定义了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. easyui tree 判断是否是叶子节点

    <input class="add" id="add" style="display: none" type="submit ...

  2. infiniband学习总结

    一．什么是infiniband InfiniBand架构是一种支持多并发链接的“转换线缆”技术,它是新一代服务器硬件平台的I/O标准.由于它具有高带宽.低延时. 高可扩展性的特点,它非常适用于服务器与 ...

  3. Java笔记：内部类

    1.把一个类放在另一类内部定义,这个定义在其他类里面的类就叫做内部类,包含内部类的类叫做外部类.内部类成员可以直接访问外部类的私有数据,但是外部类不能访问内部类的实现细节. 2.非静态内部类(没有st ...

  4. aix上使用裸设备安装oracle10g数据库

    一.检查系统信息 [root@aix222 /]# oslevel -r 5300-08 [root@aix222 /]# prtconf | grep -i mem Memory Size: 190 ...

  5. php的curl封装类

    之前一直做爬虫相关的,每次自己去写一系列curl_setopt()函数太繁琐,我于是封装了如下curl请求类. <?php /** * @author freephp * @date 2015- ...

  6. linux下测试宽带速度

    speedtest-cli是一个用Python编写的轻量级Linux命令行工具,在Python2.4至3.4版本下均可运行.它基于Speedtest.net的基础架构来测量网络的上/下行速率.安装sp ...

  7. es6笔记1^_^let、string、number、math

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本 ...

  8. 用CATransform3D实现3D效果和制作简单3D动画

    我们先来看下CATransform3D的头文件 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m2 ...

  9. .net 实战 根据configuration选项生成不同的config文件

    项目开发过程中都会遇到的问题,开发环境的配置肯定是和生产环境不一样的,一直都是重复手动拷贝,但是配置太多拷贝的弊端就显现出来了,为了解决这个问题可以有几种方案: 1.Web.config Transf ...

  10. java框架之struts2简介

    一.Struts2简介 1.Struts2概述                    Struts2是Apache发行的MVC开源框架.注意:它只是表现层(MVC)框架. M:model-----数据 ...