CSS background-position 屬性

2022-06-02 14:33 更新

定義和用法

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

注意對于這個工作在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
如果僅指定一個關(guān)鍵字,其他值將會是"center"
x% y% 第一個值是水平位置,第二個值是垂直。左上角是0%0%。右下角是100%100%。如果僅指定了一個值,其他值將是50%。 。默認(rèn)值為:0%0%
xpos ypos 第一個值是水平位置,第二個值是垂直。左上角是0。單位可以是像素(0px0px)或任何其他 CSS單位。如果僅指定了一個值,其他值將是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è)置頁面背景圖像
這個例子演示了如何在頁面上設(shè)置background-image。

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

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


瀏覽器支持

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

屬性          
background-position 1.0 4.0 1.0 1.0 3.5

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


相關(guān)文章

CSS 教程: CSS Background

CSS 參考手冊: background-image 屬性

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號