CSS background-position 背景圖片位置

CSS background-position 是網頁背景圖片位置控制的標準設計語法，使用概念非常簡單，只要把電腦螢幕的平面的左右當成水平方向，上下當成垂直方向，套用在 background-position 的兩個對齊參數中，就可以用 background-position 來控制網頁本身或網頁元素的背景圖片位置，background-position 常與 background-repeat 搭配在一起設計網頁背景圖片。

CSS background-position 語法規則
background-position: 水平方向的對齊位置 垂直方向的對齊位置;
background-position 的兩個重要參數就是水平方向以及垂直方向的對齊參數，這兩個參數可以用英文字母來表示，也可以用量化的數字如多少 px 的距離或多少百分比的距離來表示，例如距離左邊 10px 且距離上面 20px 就可以寫成「background-position:10px 20px;」這樣。background-position 所控制的背景圖片由 background-image 決定，來看兩個簡單的範例比較清楚。

CSS background-position 背景圖片位置範例一、靠左上角對齊
<div style="background-image:url(背景圖片網址);background-position:left top;width:500px;height:200px;background-color:#FFCF78;background-repeat:no-repeat;"></div>
範例的效果
範例一的 DIV 區塊大小為 500x200 的大小，其中用 background-image 所插入的背景圖片僅有 380x120 的大小，我們可以透過 background-position 來控制這個比較小的背景圖片該在 DIV 區塊內的哪個位置呈現，範例中紅色標註的「background-position:left top」語法代表的是靠左邊對齊且靠上對齊。我們可以用同樣的概念，套用不同的距離單位到 background-position，這裡有幾種不同的參數單位寫法，提供給各位參考。
  • background-position:20px 30px; //背景圖片靠左邊 20px 且靠上 30px 對齊
  • background-position:10% 40%; //背景圖片靠左10%且靠上40%對齊
  • background-position:15%; //背景圖片靠左15%對齊且靠上50%對齊
第三個例子中的＂垂直方向對齊位置＂沒有寫的情況，background-position 會很聰明的自動取中間值，也就是垂直方向靠上 50% 對齊，應該蠻簡單的吧！接著我們來看個在水平方向與垂直方向都對齊的基本寫法，也很簡單。

CSS background-position 背景圖片位置範例二、水平與垂直都置中
<div style="background-image:url(背景圖片網址);background-position:center;width:500px;height:200px;background-color:#FFCF78;background-repeat:no-repeat;"></div>
範例的效果
範例二的最大改變就在於紅色標註的「background-position:center」這裡，參數僅用了一個 center，這樣寫代表無論是水平方向或是垂直方向都是置中對齊，所以效果就像圖中這樣，整個 DIV 區塊背景顏色是橘色，藍色的背景圖片剛好完全置中。

延伸閱讀
© Copyright webtech.tw Since 2010