编辑“︁CSS背景位置”︁（章节）

= CSS背景位置 =

'''CSS背景位置'''（background-position）属性用于控制背景图像在元素内的起始位置。它是CSS背景模块的核心属性之一，允许开发者精确调整背景图像的显示区域，适用于从简单装饰到复杂布局的各种场景。

== 属性介绍 ==

background-position属性接受以下类型的值：
* 关键词（top, bottom, left, right, center）
* 长度值（px, em, rem等）
* 百分比值
* 全局值（inherit, initial, revert, unset）

默认值为<code>0% 0%</code>（左上角对齐），语法为：
<syntaxhighlight lang="css">
background-position: x-position y-position;
</syntaxhighlight>

== 基本用法 ==

=== 关键词定位 ===
最直观的定位方式，使用方向关键词组合：

<syntaxhighlight lang="css">
/* 示例1：居中显示 */
.box {
  background-image: url("star.png");
  background-position: center center;
}

/* 示例2：右下角显示 */
.box {
  background-image: url("icon.png");
  background-position: right bottom;
}
</syntaxhighlight>

=== 数值定位 ===
精确控制背景位置（坐标原点为容器左上角）：

<syntaxhighlight lang="css">
/* 向右偏移20px，向下偏移50px */
.box {
  background-image: url("arrow.png");
  background-position: 20px 50px;
}
</syntaxhighlight>

=== 百分比定位 ===
百分比的计算方式特殊：
* 0% 0% 表示图像左上角对齐容器左上角
* 100% 100% 表示图像右下角对齐容器右下角

<syntaxhighlight lang="css">
/* 图像中心点与容器中心点重合 */
.box {
  background-position: 50% 50%;
}
</syntaxhighlight>

== 高级特性 ==

=== 多背景定位 ===
CSS3支持为多个背景图像分别设置位置：

<syntaxhighlight lang="css">
.box {
  background-image: url("layer1.png"), url("layer2.png");
  background-position: left top, right bottom;
}
</syntaxhighlight>

=== 与background-origin的交互 ===
background-position的参照系受<code>background-origin</code>影响：

<mermaid>
graph LR
    A[background-origin] --> B[border-box]
    A --> C[padding-box]
    A --> D[content-box]
</mermaid>

示例：
<syntaxhighlight lang="css">
.box {
  border: 10px dashed black;
  padding: 20px;
  background-image: url("texture.jpg");
  background-origin: content-box;
  background-position: 0 0; /* 相对于内容区域定位 */
}
</syntaxhighlight>

== 数学原理 ==

背景位置的计算公式（单轴方向）：

<math>
\text{offset} = (\text{container size} - \text{image size}) \times \text{percentage}
</math>

例如容器宽度400px，图像宽度100px：
* <code>background-position: 25%</code> 的实际偏移量 = (400 - 100) × 0.25 = 75px

== 实际案例 ==

=== 雪碧图定位 ===
通过精确控制背景位置实现图标切换：

<syntaxhighlight lang="css">
.icon {
  width: 32px;
  height: 32px;
  background-image: url("sprite.png");
}

.icon-home {
  background-position: 0 0;
}

.icon-settings {
  background-position: -32px 0; /* 向左移动一个图标宽度 */
}
</syntaxhighlight>

=== 全屏背景控制 ===
保持背景图像底部始终可见：

<syntaxhighlight lang="css">
.hero-banner {
  height: 100vh;
  background-image: url("hero.jpg");
  background-position: center bottom;
  background-size: cover;
}
</syntaxhighlight>

== 浏览器兼容性 ==

大多数现代浏览器完全支持background-position，包括：
* CSS3多背景语法（Chrome 3+, Firefox 3.6+）
* 四值语法（边缘偏移量，Chrome 25+）
* 全局值支持（所有主流浏览器）

== 常见问题 ==

'''Q: 为什么百分比定位与绝对定位表现不同？'''
A: 百分比定位是相对（容器尺寸 - 图像尺寸）计算，而绝对定位是直接相对于容器尺寸。

'''Q: 如何实现背景图像与内容滚动分离？'''
A: 结合<code>background-attachment: fixed</code>使用。

== 最佳实践 ==
* 对于响应式设计，优先使用百分比单位
* 雪碧图定位时建议使用像素单位保证精度
* 测试不同background-origin值对定位的影响
* 使用开发者工具的样式检查器实时调试位置

[[Category:CSS属性]]
[[Category:背景样式]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]