关于background-position

最新推荐文章于 2024-09-23 11:30:11 发布

最新推荐文章于 2024-09-23 11:30:11 发布 · 111 阅读

文章标签：

#读书 #IE #CSS #浏览器 #Blog

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文探讨了CSS1与CSS2.1对于背景定位的不同定义，并介绍了CSS3新增的background-origin和background-clip属性，以帮助开发者更好地理解不同浏览器背景显示的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在作[url=http://hax.iteye.com/blog/114914]《精通CSS》读书笔记[/url]，写到第3章关于背景的时候，顺便补充一点关于background-position的问题。

CSS1和CSS2.1（依照目前浏览器普遍的实现方式）有差异。CSS1规范中，背景位置是content区域算起，而CSS2.1中是padding区域算起。实际上在CSS3的background module中，在已有的background-position、background-attachment和background-repeat之外，增加了几个background属性，来决定背景的定位，包括：

background-origin: border | padding | content

background-clip: border | padding

background-origin表示背景的position从哪里算起，CSS1相当于background-origin:content，而CSS2.1相当于background-origin:padding。background-clip表示背景延伸到哪个部分，CSS1和CSS2.1都是background-clip:border。

但是，如你所料，IE又是特例。

IE6中，普通的block元素的背景相当于：
background-origin:border; background-clip:border;
而hasLayout的元素的背景则相当于：
background-origin:padding; background-clip:padding;

总之，IE6在任何情况下，既不符合CSS1也不符合CSS2.1。