css [background-position] 單位

背景：寫骨架屏樣式時，嘗試背景線性漸變 linear-gradient + 動畫 @keyframes: background-position-x來實現背景的移動，因寬度為100%，用background-position-x: 100%，無效

解惑連結

background-position

• 作用：在容器中移動 background-image 或 漸變
• 預設值：0 0
• 單位： length | percentages | keywords

1. length

   非常好理解

2. percentages：x% (假設是x方向的)

   將背景x%處移動到容器的x%

   -> 當 background-size 充滿容器時，x為多少都沒有效果！

3. top | right | bottom | left | center

   只是百分比的別名

   且 top center = center top （順序both OK）

   當還未定義水平位置時，center指水平方向，

   因此 center 10% ≠ 10% center

Pay Attention - 值的個數

一個：指水平方向，垂直方向預設center

兩個：水平 垂直

---

(以下：注意瀏覽器相容性)

三個：keywords（除center） length | percentages keywords（除center） [省略第四個值0]

四個：keywords（除center） length | percentages keywords（除center） length | percentages