前端工程師利用CSS語法搭配設計網頁是必備技能,本篇要教你如何設定背景位置的語法.
CSS background-position 常被 前端工程師 用來定義背景圖片位置，是 CSS background 的屬性之一，通常與 背景圖樣屬性 (background-image)、背景重複參數 (background-repeat)搭配做網頁設計，來決定網頁背景圖片顯示位置，可調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。 前端工程師 在設計時必須設下水平位置與垂直位置的參數，可以數字、百分比或方向等為單位，讓圖片能夠在正確的位置呈現。
各種方向參數：
水平方向：left - 靠左對齊、center - 置中對齊、right - 靠右對齊垂直方向：top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊
CSS background-position 基本語法如下：
background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
通常利用水平方向與垂直方向的組合，來定義背景圖片呈現的位置。例如「background-position:left top;」這代表背景圖片靠左上角對齊。除此之外，還可以微調「靠左與靠上的距離或百分比」來設計，範例如以下所示：background-position:right top; // 靠右靠上對齊
background-position:right center; // 靠右置中對齊
background-position:right; // 靠右置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom; // 靠右靠下對齊
background-position:left top; // 靠左靠上對齊
background-position:left center; // 靠左置中對齊
background-position:left; // 靠左置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom; // 靠左靠下對齊
background-position:top center; // 靠上置中對齊
background-position:bottom center; // 靠下置中對齊
background-position:center; //背景圖片水平位置與垂直位置均置中對齊
background-position:30px 60px; //靠左 30px 靠上 60 px 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值，另一個值默認為 50%。)
| 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position) |
參考連結:
前端工程師必學CSS指令說明:盒子模型(上)-盒子屬性.邊界
前端工程師必學CSS指令說明:盒子模型(下)-邊框.留白
前端工程師實用工具CSS之邊框屬性解釋
達內教育結合英特爾和惠普一起打造IT教育王國
CSS語法格式基礎篇, 前端工程師一定要會!!
NOWnews 今日新聞
中國IT教育領導品牌 達內教育集團第一家海外授權中心
