背景:写骨架屏样式时,尝试背景线性渐变 linear-gradient + 动画 @keyframes: background-position-x来实现背景的移动,因宽度为100%,用background-position-x: 100%,无效
background-position
- 作用:在容器中移动 background-image 或 渐变
- 默认值:0 0
- 单位: length | percentages | keywords
-
length
非常好理解
-
percentages:x% (假设是x方向的)
将背景x%处移动到容器的x%
-> 当 background-size 充满容器时,x为多少都没有效果!
-
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