在CSS中,背景圖片是一個(gè)很常見的樣式屬性。而對(duì)于背景圖片的定位,就需要使用到background-position屬性來控制。background-position可以用來指定背景圖片在X軸和Y軸方向上的位置。
對(duì)于X軸的定位,可以使用如下代碼:
background-position: 水平方向位置 垂直方向位置;
其中,水平方向位置可以用length、百分比或者關(guān)鍵字來進(jìn)行指定。如果只填入一個(gè)值,那么另一個(gè)值默認(rèn)為center。
如果使用length來指定,那么這個(gè)值就代表著距離背景圖片左邊緣的距離。例如,下面的代碼將背景圖片的左邊緣與父元素的左邊緣對(duì)齊:
background-position: 0 50%;
如果使用百分比來指定,那么這個(gè)值就代表著距離父元素左邊緣的百分比距離。例如,下面的代碼將背景圖片水平方向上居中對(duì)齊:
background-position: 50% 50%;
如果使用關(guān)鍵字來指定,那么可以選用以下5個(gè)關(guān)鍵字:
- left
- center
- right
- x%(其中x代表一個(gè)0-100之間的數(shù)字)
- x(其中x代表一個(gè)長(zhǎng)度值,例如30px)
使用關(guān)鍵字指定可以簡(jiǎn)化代碼,例如下面的代碼將背景圖片移到父元素的右邊緣:
background-position: right 50%;
總之,背景圖片的X軸定位具有很多靈活的方式,可以根據(jù)具體需求進(jìn)行定制。