css-background-position-y 百分比值

实例代码

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>background-position-y属性的用法</title>
 <style>
 .example {
 background-image: url('/uploads/20250507/deer.png');
 background-repeat: no-repeat;
 background-position-y: 20%;
 background-color: lightblue;
 background-size: 80px;
 padding: 20px;
 min-height: 200px;
 }
 pre {
 background: #f5f5f5;
 padding: 10px;
 border-radius: 4px;
 font-family: monospace;
 }
 </style>
</head>

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

</html>