背景图样式回顾

正式点叫 background-image recap ，最近 kissy editor 皮肤 做得有点晕，复习解读下 css3 规范 background 部分。

chrome 演示：

chrome and background-image

background-attachment :

fixed :  背景相对于浏览器视窗固定。详细就是：位置不跟随容器内容的滚动变化，但是跟随浏览器本身的滚动条拖动而变化，使其在可视区域内位置固定,当然可能会因移到容器不可见区域而导致隐藏。

scroll : 背景相对于容器固定。详细：背景附在（attach）容器上面，位置不跟随容器内容的滚动变化，但是随着浏览器本身滚动条的拖动，和容器一样在可视区域内发生移动。

local : 背景相对于容器内容固定。详细：背景附在容器内容上面，位置随着容器内容的滚动而变化，也会随着浏览器本身滚动条的拖动，和容器一样在可视区域内发生移动。

local 属于 css3 新加特性（目前chrome支持），相当于原来直接在容器内部层上设置背景，而有了多背景支持 以及local，现在可以把这些都写在容器上了。

background-position :

定义背景图片的位置，既然要定位就要确定相对定位区域 (background-positioning-area)信息，这就和background-attachment以及的css3 新增的 background-origin设置密切相关。

当 attachment 设置 fixed 时 ，背景定位区域为视窗（initial contain block）.

scroll 时，背景定位区域为容器(background-origin设置区域)。

local 是，背景定位区域为容器(background-origin设置区域)内容。

而 background-origin 有三种设置

border-box ：包括边框的区域位置 (content+padding+border)

padding-box:不含边框的区域位置 (content+padding)

content-box:内容所占部分（content）

css2下默认为 padding-box

特别注意的是百分比的设置 ：

当设置为百分比 x% 时，横坐标方向，背景图记做 a ，背景定位区域记做 b，则最终是把 a 的 左上角定位到相对于 b 左边界的

(width(b)-width (a))*x%

处，通俗的说就是把背景图 a 的 x% 处 和 定位区域的 x% 处重合。

 

PS: ie6,7 bug

仔细比较 ie6，7 以及其他浏览器在这个页面 的表现可见，ie6，7 对于 scroll 和规范的 local 定义一样，背景附在了容器内容上面！

ie6 对于 fixed 处理也有问题，ie6 中的 fixed 不是相对于视窗定位，而是相对当前容器元素，和规范中的 scroll 一样！

 

IE9 支持 background-attachment   background-origin

 

 

应用场景：

图片轮播的 loading 提示

 

对于 ie6,7 应该将 loading 图片定义在单个图片容器上，而不是多个图片容器的容器上。