閱讀(53.9k) 書簽贊(7) 我要糾錯(cuò)

CSS background-position 屬性

2022-06-02 14:33 更新

定義和用法

background-position屬性設(shè)置背景圖像的起始位置。

注意對(duì)于這個(gè)工作在Firefox和Opera，background-attachment必須設(shè)置為 "fixed（固定）"。

默認(rèn)值:	0% 0%
繼承:	no
版本:	CSS1
JavaScript 語法:	object object.style.backgroundPosition="center"

background-position: horizontal vertical

水平是

percentage | length | left | center | right

垂直是

percentage | length | top | center | bottom

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果僅指定一個(gè)關(guān)鍵字，其他值將會(huì)是"center"
x% y%	第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個(gè)值，其他值將是50％。。默認(rèn)值為：0％0％
xpos ypos	第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他 CSS單位。如果僅指定了一個(gè)值，其他值將是50％。你可以混合使用％和positions
inherit	指定background-position屬性設(shè)置應(yīng)該從父元素繼承

如何定位background-image：

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

如何設(shè)置頁面背景圖像
這個(gè)例子演示了如何在頁面上設(shè)置background-image。

如何使用％來定位背景圖像
這個(gè)例子演示了如何使用％設(shè)置頁面上的圖像位置。

如何使用像素來定位背景圖像
這個(gè)例子演示了如何使用像素設(shè)置頁面上的圖像位置。

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

屬性
background-position	1.0	4.0	1.0	1.0	3.5

注意: IE8 及更早的瀏覽器版本不支持一個(gè)元素有多個(gè)背景圖片。