iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

CSS Secrets 導讀系列 第 5

Secret 3: 靈活的背景定位

背景裡如果有單一圖片或是標誌時,我們常常會要固定放在背景的某個角落,此時需要用到background-position 去指定背景圖的位置。

background-position 的 keyword 值能指定方形的四個角落做定位點,預設是左上角。

只設定單字的話背景圖會貼齊邊界,這樣不好看,我們會想要在之間空出一些空間,叫做 offset。

在 CSS 2.1 裡這種要求不好做,因為 offset 只能以左上角為定位點。

在固定寬高的容器裡還算好解決,把容器的尺寸減去 offset 的值就行了。

如果不幸容器是動態尺寸的話,我們就只能抓一個大概數字,比 100% 小一點點,不過這樣在不同尺寸上看起來就會產生差異。

用 CSS 3 有以下三種方法

Extended background-position

CSS 3 background-position keyword 後面可以接數值,以指定和該邊界的距離。IE 9 就已經開始支援。

需要向下相容的話可以在 background shorthand 加上 keywords。

background-origin

也是 IE 9 就開始支援。

我們在上面用 keyword 指定方位,但有沒有想過它們的基於哪個原點所定位的呢?

對 box model 熟悉的話,應該馬上想到每個容器共有4個 box: margin box, border box, padding box, content box.

容器的長寬預設是以 padding box 的尺寸計算,background-origin 同樣也是以 padding box 當做邊界。這樣做是為了不讓 border 蓋到背景。

所以我們可以將 background-origin 指定為 content-box,然後用 padding 做出 offset 的效果。

calc()

最後一個方法,在 offset 的值也可以使用 calc() 動態計算。


上一篇
Secret 2: 多重邊界
下一篇
Secret 4: 內部圓角
系列文
CSS Secrets 導讀30

尚未有邦友留言

立即登入留言