CSS background-position 属性

本文详细介绍了CSS中的background-position属性,包括其定义、JavaScript动态修改方法、常见值及其含义,并通过实例展示了如何使用负值进行精确的背景图片定位。

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

 

只有理解了此属性的含义,才能真正的使用Css的Sprites技术。

 

 

定义

background-position 属性设置背景图像的起始位置。[相对于父元素]

继承性:NO

说明

background-image 属性会在元素的背景中设置一个图像。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法:

object.style.backgroundPosition="bottom center"

例子

body{

    background-image:url(stars.gif);

    background-repeat:no-repeat;

    background-position:top left;

}

body{

    background-image:url(stars.gif);

    background-repeat:no-repeat;

    background-position:0% 0%;

}

可能的值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。

x% y%

第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。

xpos ypos

第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。

 

 

下面是重点:对坐标为负值的理解

下面是我要用到的一个背景图

 

测试例子:

HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片,
  在浏览器中看到的效果:


  从上图可以看到:当为background-position:0 0;时图片的左上角与DIV的左上角是重合的,当我们定位于background-position:-50px -50px;时发现图片向左上,移动了,也就以DIV的左上角为中心,图向左移动了50PX,向也移动了50PX.第三个示例就是上值的情况图移动的效果.这个应该是好理解的.
  总结一下就是以上都是以DIV的0,0点为参考点图片移动,假如把DIV区解释为一个坐标轴,图向左,上都为负,向右,下为正值.

  好象说这么多你也记不住,那我就告诉你,你应该记住什么吧!

  在实践中多数情况是知道一个图的位置要如上图中那个黄色的点,我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图(这张图相当于你用的效果图或称设计图),记住这张图相信你一定能把握背景图负值的方法了

 

 

<think>好的,我现在要回答用户关于CSS background-position属性的用法和示例的问题。首先,我需要确保自己对这个属性有正确的理解,并根据提供的参考资料进行准确的回答。 用户提到的参考引用有三个,其中引用2和引用3直接提到了background-position,而引用1虽然主要讲background-attachment,但可能相关的背景属性之间有关联。我需要重点参考引用2和引用3的内容。 首先,根据引用2,background-position用于设置图片相对于原点的位置,而原点由background-origin定义。引用3则提到background-repeat和background-size,但用户的问题集中在background-position上,所以我需要集中在这个属性的使用方法和示例上。 接下来,我需要整理background-position的基本用法。这个属性通常接受两个值,分别表示水平方向和垂直方向的位置。常见的值包括关键字(如left、center、right和top、center、bottom)、百分比或具体长度单位。如果只提供一个值,另一个方向会默认为center。 然后,我需要考虑如何用示例来说明不同的情况。例如,使用关键字组合、百分比或长度值,以及混合使用不同的单位。同时,结合引用2提到的background-origin,可能需要说明原点位置对background-position的影响,但用户的问题可能不需要深入到这里,除非必要。 另外,引用3提到background-repeat会影响图片的平铺方式,这在示例中可能需要提到,但用户的问题没有直接问这个,所以可能作为补充信息。 现在,我需要确保回答结构清晰,按照用户的要求分步骤说明使用方法,并提供示例代码。同时,引用需要自然地添加到相关段落的末尾,如引用[^2]和引用[^3]。 可能的结构: 1. 属性定义和作用 2. 基本语法 3. 参数类型和示例(关键字、百分比、长度) 4. 注意事项(如默认值、省略值的情况) 5. 综合示例代码 需要检查是否有遗漏的关键点,例如是否提到了初始值、继承性,以及与其他属性(如background-size)的配合使用。根据引用2,background-origin和background-position的关系可能需要简要说明,但用户的问题可能更关注具体用法,所以保持简洁。 最后,生成相关问题,参考用户提供的示例,提出与background-position相关的其他问题,比如与其他属性的配合使用,常见错误等。</think>### CSS background-position 属性详解 #### 1. 属性定义与作用 `background-position` 用于控制背景图片在元素内的起始位置。通过调整水平和垂直方向的定位,可以实现图片的精确布局。 #### 2. 基本语法 ```css background-position: [水平值] [垂直值]; ``` - **参数数量**:支持1-2个参数。若只提供1个值,另一个方向默认居中(`center`)。 - **默认值**:`0% 0%`(即左上角对齐)[^2]。 #### 3. 参数类型与示例 ##### 关键字组合 - **水平关键字**:`left`、`center`、`right` - **垂直关键字**:`top`、`center`、`bottom` ```css /* 示例1:右上角对齐 */ .box { background-position: right top; } /* 示例2:水平居中,底部对齐 */ .box { background-position: center bottom; } ``` ##### 百分比或长度值 - **百分比**:相对于元素尺寸与图片尺寸的差值计算位置。例如 `50% 50%` 表示居中。 - **长度值**:直接指定偏移量(如 `px`、`em`)。 ```css /* 示例3:向右偏移20px,向下偏移10px */ .box { background-position: 20px 10px; } /* 示例4:水平居中(50%),垂直顶部对齐 */ .box { background-position: 50% top; } ``` ##### 混合单位 允许混合关键字、百分比和长度值: ```css /* 示例5:水平从左侧偏移30px,垂直居中 */ .box { background-position: left 30px center; } ``` #### 4. 注意事项 - **与`background-origin`的关联**:定位原点受`background-origin`影响,例如设置为`content-box`时,定位基于内容区域而非边框。 - **与`background-repeat`配合**:若图片被平铺(如`repeat-x`),定位仅影响起始位置[^3]。 #### 5. 综合示例 ```css /* 居中显示不重复的背景图 */ .banner { background-image: url("image.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* 自定义雪碧图定位 */ .icon { background-image: url("sprite.png"); background-position: -120px -80px; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值