`
hax
  • 浏览: 965118 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于background-position

    博客分类:
  • CSS
阅读更多
最近在作《精通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`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...

    background-position 的学习.zip

    在CSS世界中,`background-position`是一个至关重要的属性,它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`...

    CSS中背景图片定位方法:background-position的用法

    `background-position`属性是实现这一目标的关键,它允许我们通过坐标系统来调整背景图像相对于元素的位置。下面我们将详细探讨`background-position`的用法及其背后的算法。 首先,`background-position`属性可以...

    CSS中背景background-position负值定位

    CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位

    关于背景图片的定位(background-position)

    最后,文章可能会提醒开发者,`background-position`与`background-size`、`background-repeat`、`background-origin`和`background-clip`等属性结合使用时,能创造出更多复杂的背景图像效果。这些属性的组合使用...

    css 之 background-position-x

    css 之 background-position-x css 之 background-position-x 是 CSS 中的一个属性,用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式,专门用于设置背景图片的水平位置。 背景图片的...

    CSS background-position的使用说明详解

    CSS中的background-position属性用于设置或检索对象的背景图像位置。要使用这个属性,必须先通过background-image属性指定了一个背景图片。background-position属性的位置定位不会受到对象的padding(内边距)属性...

    前端开源库-css-background-video

    在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...

    background-position鱼游动特效.zip

    总结来说,"background-position鱼游动特效"是一个结合了CSS3动画和转换技术的创新应用,它展示了如何利用现代Web技术营造出富有动态感的用户体验。开发者通过精心设计的`animation`和`transform`规则,以及可能的...

    background-position位移效果 step()人人网首页效果实现

    动画效果全部放在一张图片里,然后通过background-position来移动背景位置 达到想要的效果

    CSS background-position 属性 定位图片

    CSS background-position 属性定位图片 在 CSS 中,background-position 属性是设置背景图像的起始位置的属性。今天,我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    这里,`background-repeat` 和 `background-position` 属性分别定义每张图片的重复方式和位置。每张图片的属性值都应与 `background-image` 中对应的图片一一对应。 除了静态图片,CSS3还引入了背景渐变的概念。...

    仿MAC官网导航菜单样式源文件

    #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、background-position使用详解

    主要的背景属性包括`background-color`、`background-image`、`background-position`、`background-repeat`和`background-attachment`,这些属性可以通过合并使用缩写属性`background`来一次性设定。 1. **背景颜色...

    对背景图定位中background-position属性的自我理解

    最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍

    CSS中背景background-position负值定位深入理解[图文]

    在CSS中,`background-position`属性用于控制背景图像在元素内的定位。这个属性可以接受一到两个值,分别代表水平和垂直方向上的偏移量。这些值可以是百分比、像素或其他长度单位,甚至可以是负值。在讨论负值定位时...

Global site tag (gtag.js) - Google Analytics