前提是定义了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. Bootstrap3插件系列：bootstrap-select2

    1.下载插件 https://github.com/select2/select2 http://select2.github.io/ 2.引用插件 <script src="~/Sc ...

  2. ASP.NET Core中的依赖注入（3）: 服务的注册与提供

    在采用了依赖注入的应用中,我们总是直接利用DI容器直接获取所需的服务实例,换句话说,DI容器起到了一个服务提供者的角色,它能够根据我们提供的服务描述信息提供一个可用的服务对象.ASP.NET Core ...

  3. ASP.NET Core 中文文档 第二章 指南（4.1）ASP.NET Core MVC 与 Visual Studio 入门

    原文:Getting started with ASP.NET Core MVC and Visual Studio 作者:Rick Anderson 翻译:娄宇(Lyrics) 校对:刘怡(Alex ...

  4. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  5. 关于 ASP.NET MVC 中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...

  6. WPF 自定义ContextMenu且为左键点击显示

    <Button Click="Button_Click_3" Style="{StaticResource NormalButtonStyle}"> ...

  7. Java语言中的面向对象特性总结

    Java语言中的面向对象特性 (总结得不错) [课前思考]  1． 什么是对象?什么是类?什么是包?什么是接口?什么是内部类?  2． 面向对象编程的特性有哪三个?它们各自又有哪些特性?  3． 你知 ...

  8. 【Asp.Net Core】二、添加控制器和视图

    控制器Controller 在添加控制器前,我们先看下它为我们自动生成的一些Controller,我们看下AccountController.cs 来看下登录验证方法Login async这个应该是异 ...

  9. 《连载 | 物联网框架ServerSuperIO教程》- 9. 协议过滤器，解决一包多发、粘包、冗余数据

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  10. Maven自定义绑定插件目标：创建项目的源码jar

    <build> <plugins> <!-- 自定义绑定,创建项目的源码jar --> <plugin> <groupId>org.apac ...