更新：
Update 2008-9-12 14:59:57：
感谢同事OneMax的提醒：
background-attachment是在设置fixed时才是相对body定位；
IE7是支持background-attachment：scroll的；
我发现了很多疏漏之处，马上重新整理了一下。
关于background-attachment，针对IE系列浏览器的特性如下：
IE6：默认效果scroll，设置scroll效果正常，设置fixed正常。（IE6完美支持；和标准浏览器的表现却天壤之别）
IE7：默认效果scroll，设置scroll效果正常，设置fixed背景图像位置重置。（一半像IE6一半像IE8，承上启下？）
IE8：默认效果fixed，设置scroll后是fixed效果，设置fixed背景图像位置重置。（最接近标准浏览器的表现）
希望通过此整理，对background-attachment会有更清晰的认识：）
IE 系列，在这方面的表现，的的确确令人头痛。个人感觉IE7目前的状况是比上不足比下有余，食之无味弃之可惜。对用户来讲或对开发人员来讲，都是很让人别扭 的一款浏览器。希望IE高级版本能尽快取代老版本浏览器形成统一，也希望Windows7能取代XP和惨死的Vista，捆绑着最新版的IE浏览器，带着 开发人员又爱又恨的感情，在不久的未来迅速普及下去……再说就扯远了，继续工作。 
============================================
Update 2008-9-12 10:43:27：
今 天测试时突然发现昨日研究过程中有个遗漏：IE7居然完全不支持元素中的fixed方式。在IE7中不设置background-attachment的 话，溢出滚动后默认居然是scroll的效果，设置background-attachment:scroll后效果不变，而设置fixed后仍然会导致 background-position问题。看来IE7对这个属性的支持是很有问题的，我会继续关注这个问题，抽空再作研究。
============================================
background-attachment引发的血案……
今天在CSS森林的群里，遇到群老大鬼-CSSForest提出的一个需求：
引用内容二，其中一个背景是固定的，即不滚动（fixed）
三，这两个div是平级的，并且其内部结构可以按需更改（可以更改结构使得实现起来方便多了）
以及一个问题：
引用内容=========================抓狂的分隔线===========================
带着这些问题，我闷头苦练了将近一个上午（工作计划被打乱T.T）……
首先针对第二个问题，得出以下结论（关于background-attachment的特性）：
1.background- attachment在标准浏览器中（即IE6以外的浏览器），仅在html和body中才起作用（html和body的background- attachment默认是scroll，可以设置成fixed；其他元素overflow:scroll滚动时的background- attachment始终是fixed，并且设置scroll无效）；
2.IE系列（IE6-8）在不指定文档类型的时候（进入quirks mode模式），元素中的background-attachment支持scroll和fixed，而FF等其他内核浏览器仍然无效。
3.在不给元素设置background-attachment，并且该元素overflow:scroll滚动时，标准浏览器中默认是fixed效果，而在IE6中默认是scroll效果。
4.在IE6下，不管在任何时候设置background-attachment的fixed或scroll都起作用；即，IE6支持任何元素的background-attachment的一切（IE6的无敌兼容爆发？）。
延 伸问题：在IE6以外的标准浏览器中，设置除body、html外其他元素的background-attachment:fixed后，这些元素的 background-position将以body和html为基准进行定位，这个特性所带来的灾难是：如果页面下方两个元素都具有 background-attachment并且都没有设置background-position，那么他们的背景将重叠在页面的左上角处并且不予显 示，不管这两个元素身在何处。在页面中的表现是，两二个元素的背景离奇消失）。
此问题详见DEMO：背景消失之谜
http://www.smbey0nd.com/demo/20080911/background_disapear_1.html
=========================抓狂的分隔线===========================
得出以上结论后，再回头来看鬼提出的需求，感觉思路清晰多了：P
解决思路如下：
首先设置这两个DIV为#C1（fixed），#C2（scroll）。
1. 先考虑fixed的#C1，在标准浏览器里实现fixed很简单，压根不需要考虑什么background-attachment，直接设置背景图片即 可；不过在另类的IE6下，如果不指定background-attachment，它却将是scroll的效果。怎么办，直接 hack（_background-attachment:fixed）搞定。
注：如不用hack直接用background-attachment:fixed，将会导致上面所说的“背景消失”问题。
2. 再考虑scroll的#C2，想要达到scroll效果其实并非易事：各大标准浏览器并不“允许”你这样设置一个内部元素（IE6在这时却表现的特别亲 切，看看这个让人反感的IE6！>.<#）。该怎么办？单单一个DIV似乎没有办法做到这个要求，那么……看来只能更改结构了。OK，再 在#C2中加入一个修补元素<div />，让#C2只负责滚动，而让patch来承载背景图片和其他内容，这样滚动的时候内部文档流就会随着滚动条，自然而然地scroll了，从而也 避免了使用这该死的background-attachment所带来的一切困扰。：P
最终实现的DEMO如下：
DEMO：两个div，一个fixed一个scroll
http://www.smbey0nd.com/Demo/20080911/fixed-scroll.html
=========================抓狂的分隔线===========================
一点感想和猜测：
不 知道w3c有没有在它的某些文档中提到过background-attachment的这些特性，之前也从未接触过这方面的资料。我们在这些DEMO实例 中可以明显感觉到，w3c貌似并不提倡我们在html和body以外的元素中使用background-attachment，并且拒绝让我们在这些元素 中使用background-attachment:scroll的滚动效果。这个原因目前尚不清楚，是否由于这种效果可以用一些简单的结构很轻松的做 到，抑或是由于需求量很少，还是考虑到其他我们所想不到的原因，而取消这个效果？而让我感到很意外的是，IE6中居然可以很完美地支持 background-attachment，让人感觉哭笑不得。
最后，从这几个DEMO和实践中可以看出，background-attachment只适合用在html和body上。至于其他元素的背景，我们还是尽量让他们规矩点吧。
程序代码
Comments