background-position-y: center(当前值):这个值表示背景图像会在垂直方向居中。由于没有设置background-position-x属性,水平位置默认为0%(左对齐)。在这个例子中,你可以看到小鹿图标位于元素垂直中央且紧贴左侧。
background-position-y属性专门控制背景图像的垂直位置,可以使用以下值:
- top:顶部对齐
- center:垂直居中
- bottom:底部对齐
- 长度值(如20px):从顶部开始的精确位置
- 百分比值(如30%):相对于容器高度的百分比位置
当只设置background-position-y而不设置background-position-x时,水平位置会保持默认值0%(左侧)。要实现完全居中,需要同时设置:
background-position-x: center;
background-position-y: center;
或者使用简写属性:
background-position: center center;