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