CSS background-position 背景圖片位置

CSS background-position 用來定義背景圖片位置,是 CSS background 的屬性之一,常與 background-imagebackground-repeat 搭配設計,讓網頁背景圖片靠上、下、左、右甚至是置中顯示,設計時需使用水平與垂直方向的位置,可以給數字、百分比或方向參數,讓圖片能夠在正確的位置呈現,background-position 是標準的 CSS 背景位置設計方法,所有的主流瀏覽器都支援 background-position。

CSS background-position 基本語法
background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
通常使用水平方向以及垂直方向的組合來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊,除此之外,還可以使用「靠左與靠上的距離」以及「靠左與靠上的百分比」來設計,範例還會詳細說明。

可以使用的方向參數
方向參數
水平方向left - 靠左對齊、center - 置中對齊、right - 靠右對齊
垂直方向top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊

CSS background-position 範例一、各種對齊方式
background-position:right bottom; // 靠右靠下對齊
background-position:30px 60px; //靠左 30px 靠上 60 px 的位置
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置
background-position:10%; // 效果同上一行,靠左 10% 靠上 50% 的位置
以上範例要確保正確顯示,需搭配 background-repeat:no-repeat 告訴瀏覽器背景圖片不要重覆顯示。特別要注意的是,如果使用了簡化寫法,只寫一個屬性值,另一個屬性值將會自動取中間值,為了將來管理方便,建議兩個方向的屬性值都寫上去比較好。

CSS background-position 範例二、垂直置中對齊
body{
 background-image:url('背景圖片'); //先給你想要放在背景的圖片路徑或網址
 background-repeat:no-repeat; //背景圖片不要重覆顯示(僅顯示一次)
 background-attachment:fixed; //背景圖片位置固定
 background-position:center; //背景圖片水平位置與垂直位置均置中對齊
}
垂直置中算是比較特別的一種寫法,只需要寫一個屬性值 center 即可,因為另外一個方向會自動取中間值。範例將背景圖片的位置設為固定(background-attachment:fixed)的主要原因是讓滑鼠上下滑動的時候,背景圖片不會跟著被移動,不過這樣的效果只適用在網頁背景或是 textarea 這類網頁元素中,在 DIV 區塊內使用並沒有太大的意義。另外,background-position 不只是單純的用來設計網頁背景圖片位置,也能用來設計 DIV 區塊內的背景圖片位置,用法是一樣的。

相關閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012