由於開發某 module template 的關係, survey 了 CSS3: background-position 這個屬性, 為了希望背景位置也可以是相對的, 因此採用了 % 的做法, 不過卻卡關卡了一整個下午, 深入研究後, 赫然發現當設置 % 的時候, 其實會和絕對單位有著截然不同的詮釋. 透過這篇 note 來幫助自己注記之外, 也希望能夠幫助到對這屬性有疑惑的朋友們!
CSS3: background-position 可以用來設至背景圖片的位置, 常用的作法不外乎就是直接設定 X 和 Y 的座標, 用來移動背景圖至我們想要的位置, 比方說
background-position:60px 60px;
它代表的意思就是背景圖片往右邊和下方各移動 60px(左上角為原點 0,0), 也就是說透過絕對數值的定義, 我們可以讓背景圖移動到任何我們想要的位置.
不過, 如果今天設置的是用「 %」的話, 那麼就不是這麼一回事了喔! 首先 % 它是相對於背景圖片的大小來作變化,
background-position: 30% 30%;
這表示說延著背景圖片 X 軸 30% 以及沿著背景圖片 Y 軸 30% 的位置為新的座標點, 再把這個新的座標點鎖定移動至 container 元件寬高的 30% 30% 的地方, 雙重交互作用下就會跟絕對數值的定義完全不同.
也因此 background-position: 100% 100%; 就會等同於
background-position: right bottom;
是不是很有趣, 筆者為了這個 % 的單位花了一個下午的時間才中於把它理解清楚. 在接下來範例中, 我們會用到的元件如下:
600px x 600px 的背景圖片, 我們在它 30%, 30% 處標示了紅色的準線
以及
200px x 200px 的 container 元件, 透過 :before, :after 設置了紫色的準線, 當 hover 的時候, 紫色的準線會消失
頁面中所呈現的這個範例, 便是設至 background-position: 30% 30%; 所以背景圖片便會以 30%, 30% 為新的座標, 再把這個新的座標鎖定移動至 container 寬高的 30%, 30% 處, 透過背景圖片的內容以及我們刻意在 container 設置的準線來作比對, 剛好彼此是確切的重疊在一起(mouseover 至測試區塊上), 原本背景圖片上的紅色準線, 會被 container 上的紫色準線所遮蔽, 剛好驗證了這個理論.
透過這樣一個簡單的實作, 來幫助大家能夠更加的認識 background-position 這個 CSS3 有趣的屬性, 希望對大家有幫助, 也歡迎有興趣的朋友一起討論喔!
歡迎點擊下方連結進行觀看 : backgroundPosition: http://mei.homin.com.tw/backgroundP…
※ Reference:
