background-position-x: 20%(当前值):这个值表示背景图像会定位在水平方向20%的位置(从左侧计算)。由于没有设置background-position-y属性,垂直位置默认为0%(顶部对齐)。
在这个例子中,你可以看到小鹿图标位于元素水平方向20%的位置,紧贴顶部。百分比定位的含义是:图像上距离左边缘20%的点会与容器左边缘20%的位置对齐。
background-position-x属性专门控制背景图像的水平位置,可以使用以下值:
- left:左对齐(等价于0%)
- center:水平居中(等价于50%)
- right:右对齐(等价于100%)
- 长度值(如20px):从左侧开始的精确位置
- 百分比值(如20%):相对于容器宽度的百分比位置
当只设置background-position-x而不设置background-position-y时,垂直位置会保持默认值0%(顶部)。要实现完全自定义定位,可以这样设置:
background-position-x: 20%; /* 水平位置20% */
background-position-y: 30%; /* 垂直位置30% */
或者使用简写属性:
background-position: 20% 30%; /* 水平 垂直 */
注意:百分比定位时,20%表示图像上距离左边缘20%的点会与容器左边缘20%的位置对齐,这对非对称图像特别有用。