iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
8
Modern Web

金魚都能懂的CSS必學屬性系列 第 18

Background-position- 金魚都能懂的CSS必學屬性

background-position 背景位置指的是背景圖片的位置而非色彩位置,所以切記!使用這個屬性時,請記得搭配 background-image 使用,而此指的位置是水平 X 軸與垂直 Y 軸的位置,並沒有前後Z軸層級的位置,所以無法利用這個屬性來控制背景圖片的前後,background-position 的語法規則如下:

background-position: left top;

background-position 可以使用的值有數值與關鍵字,並且部分的值可以合併混用,background-position 可以使用的值有以下幾種

  • px
  • %
  • em
  • ex
  • left or right
  • top or bottom
  • center

background-position 的座標

background-position 預設是以左上角為起點,如果我們把畫面分割成 X 與 Y 軸,X 代表水平軸,方向則是由左至右為正數,反之在左側往左側移動則為負數。Y 軸表示垂直軸,方向則是由上至下為正數,反之在上方還要往更上方移動則為負數。而座標概念是當你採用數值類型的值時產生效用的,若使用關鍵字的話,有時反倒簡單許多。

background-position關鍵字

background-position 使用關鍵字時需要特別注意一個軸向僅使用一個值,,也就是說不會出現下面這種原始碼

background-position: left right;

background-position: top bottom;

關鍵字非必要設定兩個軸向值

background-position 使用關鍵字時,可以不需要同時設定兩個軸向,例如以下原始碼可以讓背景圖片水平垂直居中於該容器中

background-position: center;

而以下原始碼則會讓背景圖片「水平靠左,垂直居中」

background-position: left;

以下原始碼則會讓背景圖片「水平靠右,垂直居中」

background-position: right;

以下原始碼則會讓背景圖片「水平居中,垂直靠上」

background-position: top;

以下原始碼則會讓背景圖片「水平居中,垂直靠下」

background-position: bottom;

看了以上的例子,是不是發現了些甚麼?背景圖片位置少了一個軸值的話,預設就是 center 啊!這樣對於省 code 來說,又能偷懶了!當然 Amos 還是會建議各位寫清楚一點好啦,畢竟如果瀏覽器改了個預設值的話,哪天被瀏覽器弄到畫面跑掉倒是真的很冤啊!所以還是建議兩個軸都寫清楚一點,像是下面這樣或比較好啦

background-position: left bottom;

background-position: right bottom;

background-position: center top;

依此類推自己發揮吧!

關鍵字與值的混用

前面有提到過 background-position 的值,可以關鍵字與數值混用,所以表示我們可以同時間設定數值與關鍵字,就像下方這樣

background-position: 50px top;

上面這樣的寫法,會讓你的背景圖片位於容器物件的上方貼頂,圖片左緣離容器左方邊緣 50px 的位置。那麼我們如果採用以下兩種寫法的話又會如何呢?

寫法一

background-position: 50px center;

寫法二

background-position: center 50px;

答案是寫法一的圖片位置會在離容器左側 50px 位置並垂直居中,寫法二的圖片位置則會水平居中,並離容器頂端 50px 位置,有猜到是怎麼一回事嗎?實際上 background-position 的值,只要你的值不是 center 這個關鍵字,那就是看你撰寫的關鍵字是否為 X 軸的關鍵字,若 background-image 的第二個值是 X 軸的關鍵字的話,那麼第一個值就會被辨識為 Y 軸,但若是有出現 center 這個關鍵字的話,你的值就會依照 X 先 Y 後這樣的順序去解讀,各位開發者可千萬不能不注意喔。

background-position 使用注意事項

新手由於觀念不是很紮實,所以使用 background-position 時,還是有些事情需要特別提醒一下,避免寫了一些讓自己很混亂的 code,以下建議就給新手們看看囉

  1. 測試時,請勿讓背景圖片重複 repeat,避免自己看不出來位置在哪
  2. 使用關鍵字時,使用兩個關鍵字,避免自己混亂
  3. 關鍵字與數值混用時,建議使用 X Y 的順序撰寫,不要使用 Y X 的順序,避免自己混淆
  4. 圖片出現預期以外位置的狀況時,不要慌張,保持案發現場的狀況,不要弄亂,並找專業人士協助處理

以上就是今天的金魚都能懂的 CSS 必學屬性,大家好好去玩看看吧!


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Background-image 之二- 金魚都能懂的CSS必學屬性
下一篇
Background-repeat- 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言