Mafanikio ya Chaguo cha Kifungu cha Kina cha CSS

Muhtasari na matumizi

background-position Kipimo cha picha ya nyakati inayotukia kwanza.

Hii kipimo kina uwanja wa picha ya nyakati (kwa background-image Mahali wa uwanja wa ujumbe, picha ya nyakati inayotukia hivi inasaidia kuanzia hapa.

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

另请参阅：

CSS 教程：Mabaki ya mbao wa CSS

CSS 参考手册：background-image 属性

HTML DOM 参考手册：backgroundPosition 属性

实例

如何定位背景图像：

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

亲自试一试

CSS 语法

background-position: value;

属性值

值 描述
  • 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 值。

技术细节

默认值： 0% 0%
继承性： no
版本： CSS1
JavaScript 语法： object.style.backgroundPosition="center"

更多实例

如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。

Matumizi ya kifungu cha kusaidia

Mafanikio ya mifano inayoitiririka katika tablia ya mifano hivi inaonyesha chukua mifano wa msingi wa sababu ya kumfikiria kwa sababu ya msingi.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5