“CSS 2.1 参考手册/background-position”的版本间的差异

来自Blueidea
跳转至： 导航、 搜索
（→‎百分比）
（→‎可能的值）
 
（未显示同一用户的1个中间版本）
第12行： 第12行：
 
==特性==
 
==特性==
 
===可能的值===
 
===可能的值===
−
====百分比 百分比====
+
*百分比 百分比
 
第一个值为横向位置，第二个值为综向位置。值<code>0% 0%</code>表示元素边框内的最左上角。下图演示了在CSS box模型中百分比值和他们所代表的位置：
 
第一个值为横向位置，第二个值为综向位置。值<code>0% 0%</code>表示元素边框内的最左上角。下图演示了在CSS box模型中百分比值和他们所代表的位置：
 
:/*预留图片 CSS box模型的示意图*/
 
:/*预留图片 CSS box模型的示意图*/
第18行： 第18行：
 
:/*预留图片示例图*/
 
:/*预留图片示例图*/
  
−
====百分比====
+
*百分比
−
背景图片的横向位置。纵向值被自动设为50%
+
:背景图片的横向位置。纵向值被自动设为50%
  
−
====长度 长度====
+
*长度 长度
 
:第一个值为横向位置，第二个值为纵向位置。以元素边框以内的左上角为基准。
 
:第一个值为横向位置，第二个值为纵向位置。以元素边框以内的左上角为基准。
−
====长度====
+
*长度
 
:背景图片的横向位置，纵向位置自动被设为50%.
 
:背景图片的横向位置，纵向位置自动被设为50%.
−
====top left====
+
*top left
 
:相当于 0% 0%.
 
:相当于 0% 0%.
−
====left top====
+
*left top
 
:相当于 0% 0%.
 
:相当于 0% 0%.
−
====top====
+
*top
 
:相当于 50% 0%.
 
:相当于 50% 0%.
−
====top center====
+
*top center
 
:相当于 50% 0%.
 
:相当于 50% 0%.
−
====center top====
+
*center top
 
:相当于 50% 0%.
 
:相当于 50% 0%.
−
====right top====
+
*right top
 
:相当于 100% 0%.
 
:相当于 100% 0%.
−
====top right====
+
*top right
 
:相当于 100% 0%.
 
:相当于 100% 0%.
−
====left====
+
*left
 
:相当于 0% 50%.
 
:相当于 0% 50%.
−
====left center====
+
*left center
 
:相当于 0% 50%.
 
:相当于 0% 50%.
−
====center left====
+
*center left
 
:相当于 0% 50%.
 
:相当于 0% 50%.
−
====center====
+
*center
 
:相当于 50% 50%.
 
:相当于 50% 50%.
−
====center center====
+
*center center
 
:相当于 50% 50%.
 
:相当于 50% 50%.
−
====right====
+
*right
 
:相当于 100% 50%.
 
:相当于 100% 50%.
−
====right center====
+
*right center
 
:相当于 100% 50%.
 
:相当于 100% 50%.
−
====center right====
+
*center right
 
:相当于 100% 50%.
 
:相当于 100% 50%.
−
====bottom left====
+
*bottom left
 
:相当于 0% 100%.
 
:相当于 0% 100%.
−
====left bottom====
+
*left bottom
 
:相当于 0% 100%.
 
:相当于 0% 100%.
−
====bottom====
+
*bottom
 
:相当于 50% 100%.
 
:相当于 50% 100%.
−
====bottom center====
+
*bottom center
 
:相当于 50% 100%.
 
:相当于 50% 100%.
−
====center bottom====
+
*center bottom
 
:相当于 50% 100%.
 
:相当于 50% 100%.
−
====bottom right====
+
*bottom right
 
:相当于 100% 100%.
 
:相当于 100% 100%.
−
====right bottom====
+
*right bottom
 
:相当于 100% 100%.
 
:相当于 100% 100%.
−
====inherit====
+
*inherit
 
:使用父对象的计算值。
 
:使用父对象的计算值。
  

2008-05-12T21:15:58的最后版本

定义

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%

适用于

所有元素。

继承

没有。

另见

取自“http://wiki.blueidea.com/index.php?title=CSS_2.1_参考手册/background-position&oldid=2660”