用五個小學問做自己想要的CSS背景好簡單!(2)背景位置設定

用五個小學問做自己想要的CSS背景好簡單!(2)背景位置設定

用五個小學問做自己想要的CSS背景好簡單!(2)背景位置設定
用五個小學問做自己想要的CSS背景好簡單!(2)背景位置設定

當前端工程師想要設定位置時怎麼辦?基本語法通通在這,簡直是懶人包!

前端工程師可用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背景好簡單!(1)背景固定模式

用五個小學問做自己想要的CSS背景好簡單!(3)背景重複模式

用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣

Walmart也趕上人工智慧的潮流,嘗試讓顧客受到最優的待遇!

來上Python課程,不用怕未來10年沒工作!

2018登上排行榜:”達內教育”最有價值IT教育品牌!!

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料