background

时间 2019-11-16

标签 background 繁體版

原文原文链接

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

取值：html

scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。css3

fixed：背景图相对于视口固定，因此随页面滚动背景不动，至关于背景被设置在了body上。浏览器

local：背景图相对于元素内容固定，post

inhert:继承，没什么说的。ui

该属性能够应用于任何元素。url

1、scroll【背景图滚动】

设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。htm

localblog

Note:继承

对于scroll，通常状况背景随内容滚动，可是有一种状况例外。

对于能够滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

2、local【滚动元素背景图滚动】

对于能够滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。

由于背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

View Code

3、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;效果都是同样的，都是相对于视口，由于一个网页只有一个视口，该背景和元素已经不要紧了，要说有关大概也只是元素不可见则背景图不可见。

而这个视口是什么呢？这里推荐一篇文章《像素与浏览器视口的细节》

4、多背景图background-attachment

也能够为多个背景图设置background-attachment

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}

5、资源连接

w3c background-attachment

像素与浏览器视口的细节

a table of two viewports