最近在作
《精通CSS》读书笔记,写到第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。
分享到:
相关推荐
批量输出 CSS background-position 属性的定位像素值
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
background-position 的学习.zip 欢迎下载
CSS中背景图片定位方法:background-position的用法,附带算法
语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | ...
background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。
css 之 background-position-x
动画效果全部放在一张图片里,然后通过background-position来移动背景位置 达到想要的效果
这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
background-position的说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( ...
#nav .n01 a:visited { background-position:0 -114px; } #nav .n01 a:hover { background-position:0 -38px; } #nav .n01 a:active { background-position:0 -76px; } #nav .n02 a:link { background-position:-...
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
博文链接:https://ice-cream.iteye.com/blog/201365
复制代码代码如下: .nav { background:transparent url(images/y.gif) no-repeat scroll 0 0; height:42px; width:980px; font-size:12px; list-style:none; } .nav ul{ padding-left:4px; } .nav li{position:...
background-position:-22px -5px; } #face li#face2 { background-position:-104px -5px; } #face li#face3 { background-position:-185px -5px; } #face li#face4 { background-position:-265px -5px; }...