css-background-position-x 长度值

实例代码

<!DOCTYPE html>
<html>

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

</html>