作者：王军

标准参考

如果设置了背景图形（'background-image' 特性），'background-attachment' 特性指定了图形是否相对视口固定（fixed）或随着包含块滚动（'scroll'）。

而每一个视图中仅有一个视口，如果有一个元素具备滚动机制（'overflow' 特性设置），则设定在该元素上的固定的背景（background-attachment : fixed）不随该元素移动，设定在该元素上的滚动的背景（background-attachment : scroll）不随该元素的滚动条滚动。

即使背景图形是固定的，它也只是在元素的 content、padding 和 border 区域（即 border box 之内）可见。因此，除非图形平铺（background-repeat: repeat），否则它可能是不可见的。

关于 'background-attachment' 特性的详细信息，请参考 CSS 2.1 'background-attachment' 中的内容。

问题描述

在 IE6 IE7 IE8(Q) 下，当一个拥有滚动机制的元素设置了 'background-image' 特性并且 'background-attachment' 特性值为 'scroll' 时，元素的背景图片会随着元素内容滚动。

造成的影响

若为一个拥有滚动机制的元素设置了 'background-image' 特性并且 'background-attachment' 特性值为 'scroll'， 在 IE6 IE7 IE8(Q) 下滚动该元素时其背景图片也会随着滚动，而在其它浏览器中背景图片不会移动，这会造成了视觉上的差异。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

规范中明确规定了设置 'background-attachment : scroll' 的元素不随滚动条移动，而 IE6 IE7 IE8(Q) 却反其道为之。

分析以下代码：

<div style="background:url(google.png) repeat-x scroll 0 0
                #FFFFFF;width:300px;height:200px;overflow:auto;"> <div
                style="background:yellow;height:200px;width:40px;">inner content inner content inner content inner
                content inner content</div> <div style="width:400px;text-align:right;">OUTER
                CONTENT</div> </div>

上述代码创建了一个拥有水平和垂直滚动机制的，并且设置了背景图片，'background-attachment' 特性值为 'scroll' 的元素， 分别将垂直滚动条滚动到最底部，将水平滚动条滚动到最右端，各浏览器中表现如下：

IE6 IE7 IE8(Q)	Firefox Chrome Safari Opera

从以上测试结果中可以看出，IE6 IE7 IE8(Q) 中在水平及垂直方向上背景图片均会随着元素内容滚动。

CSS Backgrounds and Borders Module Level 3 草案中为 'background-attachment' 添加了新的值 'local'。当设置了 'background-attachment : local' 后， 背景图片将相对于内容固定，如果元素拥有滚动机制（水平或垂直方向），背景图片会随着元素内容滚动。

分析以下代码：

<div style="background-image:url(google.png);background-attachment:local;background-repeat:
                repeat-x;width:300px;height:200px;overflow:auto;"> <div
                style="background:yellow;height:200px;width:40px;">inner content inner content inner content inner
                content inner content</div> <div style="width:400px;text-align:right;">OUTER
                CONTENT</div> </div>

分别将垂直滚动条滚动到最底部，将水平滚动条滚动到最右端，在 Chrome Safari Opera 中表现如下：¹

注1：目前只有 Chrome Safari Opera 支持 'background-attachment : local'。

关于 'background-attachment : local' 的更详细信息，请参考 CSS Backgrounds and Borders Module Level 3 草案：3.5. The 'background-attachment' property。

解决方案

1.若需要在所有浏览器下元素图片不随元素内容滚动，则不给元素设置任何背景，并且在元素的父元素上设置背景图；
2.若需要在所有浏览器下元素图片随元素内容滚动，则不设置元素背景，而设置元素内容的背景图片并设置 'background-attachment : scroll'；
3.对于 Chrome Safari Opera，如果需要使背景图片随元素内容滚动，使用 'background-attachment : local'。

• 若需要在所有浏览器下元素图片不随元素内容滚动：

<div style="background:url(google.png) repeat-x scroll 0 0
                #FFFFFF;width:300px;"> <div style="width:300px;height:200px;overflow:auto;"> <div
                style="background:yellow;height:200px;width:40px;">inner content inner content inner content inner
                content inner content</div> <div style="width:400px;text-align:right;">OUTER
                CONTENT</div> </div> </div>

• 若需要在所有浏览器下元素图片随元素内容滚动：

<div
                style="width:300px;height:200px;overflow:auto;"> <div style="background:url(google.png) repeat-x
                scroll 0 0 #FFFFFF;"> <div style="background:yellow;height:200px;width:40px;">inner content
                inner content inner content inner content inner content</div> <div
                style="width:400px;text-align:right;">OUTER CONTENT</div> </div> </div>

参见

知识库

• ...

相关问题

• ...