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: 50px;
 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: 50px（当前值）：这个值表示背景图像会定位在距离顶部50像素的位置。由于没有设置background-position-x属性，水平位置默认为0%（左对齐）。
 
 在这个例子中，你可以看到小鹿图标位于元素顶部向下50像素处，紧贴左侧。使用像素值定位可以精确控制背景图像的垂直位置。
 
 background-position-y属性专门控制背景图像的垂直位置，可以使用以下值：
 <ul>
 <li>top：顶部对齐（等价于0或0%）</li>
 <li>center：垂直居中（等价于50%）</li>
 <li>bottom：底部对齐（等价于100%）</li>
 <li>长度值（如50px）：从顶部开始的精确像素位置</li>
 <li>百分比值（如20%）：相对于容器高度的百分比位置</li>
 </ul>
 
 当只设置background-position-y而不设置background-position-x时，水平位置会保持默认值0%（左侧）。要实现完全自定义定位，可以这样设置：
 <pre>background-position-x: 30px; /* 水平位置30像素 */
background-position-y: 50px; /* 垂直位置50像素 */</pre>
 或者使用简写属性：
 <pre>background-position: 30px 50px; /* 水平 垂直 */</pre>
 
 注意：像素定位是绝对定位，不受容器尺寸变化影响，适合需要固定位置的场景。
 </div>
</body>

</html>