background-position:center right這里center right分別代表什么,引入對圖片背景定位介紹

background-position是用于定位背景圖片中對象中顯示定位，比如圖片作為背景時在對象內什么位置開始顯示，顯示樣式等。比如讓一個圖片作為對象背景距離對象左邊或右邊多少間距開始顯示，距離對象上邊或下邊多少間距開始顯示，或者用常見left、right、center代表水平左、中、右顯示圖片，或者常見bottom、top代表下部(底部)、上部(頂部)顯示圖片。

一、語法結構 ? - ? TOP

1、基礎語法

background-position:10px(水平左中右) 20px(垂直上下)

Div{background-position:10px 20px}

代表圖片作為對象背景時在對象內距離左側10px和距離上邊20px開始顯示背景圖片。

2、background-position的屬性值介紹

background-position后可跟2個值，2個值用空格間隔開，第一個值，固定代表水平方向(橫向)左、中、右距離，第二個值，固定代表垂直上、下距離。

3、background-position第一個值可根值

1)、具體數(shù)字+單位，如(可為正整數(shù)值 如10px，也可為負整數(shù)值 -10px 整數(shù)+單位)

2)、百分比，如(10%)

3)、left(背景圖片靠對象左側開始顯示)

4)、center(圖片作為對象背景水平居中顯示)

5)、right(背景圖片靠對象右側開始顯示)

4、background-position第二個值可根值

1)、具體數(shù)字+單位，如(可為正整數(shù)值 如10px，也可為負整數(shù)值 -10px 整數(shù)+單位)

2)、百分比，如(10%)

3)、top(背景圖片靠對象緊貼頂部開始顯示)

4)、bottom(背景圖片靠對象緊貼底部開始顯示)

background-position背景定位分析圖

css background-position語法結構剖析介紹圖

二、相關閱讀 ? - ? TOP

三、總結 ? - ? TOP

background-position是用于定位圖片作為背景時，顯示在對象位置，其值有2個，兩個值分別代表意義不同，前者值是水平方向定位，后者值是垂直豎向定位。其兩者都可以為正，可以為負，也可以使用固定幾個英文單詞(left、right、center、top、bottom)進行定位背景圖片。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的html背景定位,css background-position center left right top bottom代表意思的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。