CSS 2.1 参考手册/background-position
来自Blueidea
目录
- 1 定义
- 2 案例
- 3 特性
- 3.1 可能的值
- 3.1.1 百分比 百分比
- 3.1.2 百分比
- 3.1.3 长度 长度
- 3.1.4 长度
- 3.1.5 top left
- 3.1.6 left top
- 3.1.7 top
- 3.1.8 top center
- 3.1.9 center top
- 3.1.10 right top
- 3.1.11 top right
- 3.1.12 left
- 3.1.13 left center
- 3.1.14 center left
- 3.1.15 center
- 3.1.16 center center
- 3.1.17 right
- 3.1.18 right center
- 3.1.19 center right
- 3.1.20 bottom left
- 3.1.21 left bottom
- 3.1.22 bottom
- 3.1.23 bottom center
- 3.1.24 center bottom
- 3.1.25 bottom right
- 3.1.26 right bottom
- 3.1.27 inherit
- 3.2 默认值
- 3.3 适用于
- 3.4 继承
- 3.1 可能的值
- 4 另见
定义
background-position属性指定了背景图片的位置. 如果仅给定了一个百分比或长度值的话, 该值会被应用到横向的位置, 而纵向的值会被自动设置为50%. 如果给定了两个值，则第一个值为横向位置. background-position属性的值可以为关键字、长度值或百分比以及他们的组合, (例如, 50% 2cm 或 center 2cm 或 center 10%). 出于逻辑，当使用关键字和非关键字的组合时，left和right只能用于第一个值，而top或bottom只能用于第二个值。
案例
a.external { padding-right: 16px; background-image: url('images/arrow.gif'); background-repeat: no-repeat; background-position: right; }
特性
可能的值
百分比 百分比
第一个值为横向位置，第二个值为综向位置。值0% 0%表示元素边框内的最左上角。下图演示了在CSS box模型中百分比值和他们所代表的位置：
- /*预留图片 CSS box模型的示意图*/
下图为浏览器中背景图在65% 32%位置的屏幕截图：
- /*预留图片示例图*/
百分比
- 背景图片的横向位置。纵向值被自动设为50%
长度 长度
- 第一个值为横向位置，第二个值为纵向位置。以元素边框以内的左上角为基准。
长度
- 背景图片的横向位置，纵向位置自动被设为50%.
top left
- 相当于 0% 0%.
left top
- 相当于 0% 0%.
top
- 相当于 50% 0%.
top center
- 相当于 50% 0%.
center top
- 相当于 50% 0%.
right top
- 相当于 100% 0%.
top right
- 相当于 100% 0%.
left
- 相当于 0% 50%.
left center
- 相当于 0% 50%.
center left
- 相当于 0% 50%.
center
- 相当于 50% 50%.
center center
- 相当于 50% 50%.
right
- 相当于 100% 50%.
right center
- 相当于 100% 50%.
center right
- 相当于 100% 50%.
bottom left
- 相当于 0% 100%.
left bottom
- 相当于 0% 100%.
bottom
- 相当于 50% 100%.
bottom center
- 相当于 50% 100%.
center bottom
- 相当于 50% 100%.
bottom right
- 相当于 100% 100%.
right bottom
- 相当于 100% 100%.
inherit
- 使用父对象的计算值。
默认值
0% 0%
适用于
所有元素。
继承
没有。
