Java課程是為了今日．Python課程是為了將來

前端工程師設計網頁必學:CSS背景位置設定

CSS background-position (CSS背景位置設定) 用來定義背景圖片位置，是 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的常見邊框屬性解釋

前端工程師的必備知識:CSS的繼承關係

前端工程師套用 CSS 樣式到 HTML 檔案上的4種方式!

前端工程師人人必備懶人包:網頁顏色代碼對照表

關於CSS的邊框屬性,前端工程師不可不知的學問!

SEO優化再也無法困擾你!網址的精隨分析給你聽!

網路行銷課程讓你與主關鍵字搭上邊,增加Google得分