开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!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: center; /* 只设置了水平位置 */ background-color: lightblue; /* 添加浅蓝色背景 */ background-size: 80px; padding: 20px; min-height: 200px; /* 添加最小高度使效果更明显 */ } </style> </head> <body> <div class="example"> <strong>background-position-x: center（当前值）</strong>：这个值表示背景图像会在水平方向居中。由于没有设置background-position-y属性，垂直位置默认为0%（顶部对齐）。在这个例子中，你可以看到小鹿图标位于元素水平中央且紧贴顶部。 <p>background-position-x属性专门控制背景图像的水平位置，可以使用以下值：</p> <ul> <li><strong>left</strong>：左对齐</li> <li><strong>center</strong>：水平居中</li> <li><strong>right</strong>：右对齐</li> <li><strong>长度值</strong>（如20px）：从左侧开始的精确位置</li> <li><strong>百分比值</strong>（如30%）：相对于容器宽度的百分比位置</li> </ul> <p>当只设置background-position-x而不设置background-position-y时，垂直位置会保持默认值0%（顶部）。要实现完全居中，需要同时设置：</p> <pre>background-position-x: center; background-position-y: center;</pre> 或者使用简写属性： <pre>background-position: center center;</pre> </div> </body> </html>
运行结果：
