上一篇
下一篇
关于background-attachment的研究
作者:SMbey0nd 日期:2008-09-11
更新：
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提出的一个需求：
引用内容
以及一个问题：
引用内容
=========================抓狂的分隔线===========================
带着这些问题，我闷头苦练了将近一个上午（工作计划被打乱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 class="patch" />，让#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上。至于其他元素的背景，我们还是尽量让他们规矩点吧。
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提出的一个需求：
引用内容一，有两个div在同一页面里，都有背景，宽高一样，有y方向滚动条
二，其中一个背景是固定的，即不滚动（fixed）
三，这两个div是平级的，并且其内部结构可以按需更改（可以更改结构使得实现起来方便多了）
二，其中一个背景是固定的，即不滚动（fixed）
三，这两个div是平级的，并且其内部结构可以按需更改（可以更改结构使得实现起来方便多了）
以及一个问题：
引用内容background-attachment，是否只能用于html和body？
=========================抓狂的分隔线===========================
带着这些问题，我闷头苦练了将近一个上午（工作计划被打乱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 class="patch" />，让#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上。至于其他元素的背景，我们还是尽量让他们规矩点吧。
[本日志由 SMbey0nd 于 2008-09-12 03:13 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 前端开发 CSS fixed scroll background attachment
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: 前端开发 CSS fixed scroll background attachment 评论: 6 | 引用: 0 | 查看次数: -
绣财[2008-10-15 08:32 PM | 
]
别总路过，再路过就要收路费了发表评论