background-position的理解-优快云博客

本文详细介绍了CSS中background-position属性的使用方法，包括默认值、如何指定位置（使用数据值单位或百分比）、以及一些示例代码，如背景图片居中、定位到四个角落等。

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

[b]background-position: [left] [top] [/b];
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角，也就是说padding值不影响position的定位。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。内置的几个值分别对应：
top:0%;
left:0%;
right:100%;
bottom:100%;
center:50%;

[b]1.对于使用数据值单位（如px等）[/b]
那么以目标元素左上角为坐标原点，以image元素的左上角为参考点，距离目标元素的左边距和上边距长度。
[b]2.对于使用百分比，[/b]
以目标元素左上角为坐标原点，以image中的点X为参考点，距离目标元素的左边距和上边距长度。X满足：
X 是 DIV上，距离DIV元素左上角[left%,top%] 与 image上，距离image元素的左上角[left%,top%]的重叠点。

因此，我们也可以计算出image元素左上角距离div元素左上角的距离：
~left:（div_width - image_width）* left%;
~top:（div_height - image_height）* top%;
图示如下：

[img]http://dl.iteye.com/upload/attachment/296187/81d913d1-bf0f-3454-aaa9-5c2e4dc2b02b.bmp[/img]

实例：
背景图片居中：background-position: 50% 50%;[or center center]
左上角：background-position: left top ;[or 0% 0%]
左下角：background-position: left bottom ;[or 0 100%]
右下角：background-position: right bottom ;[or 100% 100%]
右上角：background-position: right top ;[or 100% 0%]

[b]注意：不能将数据值单位和百分比一起用.[/b]

整理自：《精通CSS高级WEB标准解决方案》