English
资源说明：在CSS中，`background-position`属性用于控制背景图像在元素内的定位。这个属性可以接受一到两个值，分别代表水平和垂直方向上的偏移量。这些值可以是百分比、像素或其他长度单位，甚至可以是负值。在讨论负值定位时，我们需要深入理解其工作原理。
让我们回顾一下`background-position`的基本用法。例如，`background-position: 0 0;`会将背景图像放置在元素的左上角，即相对于元素内容区域的(0,0)坐标。如果设置为`background-position: 100% 100%;`，则图像会位于元素的右下角。
当使用负值时，背景图像的定位会发生变化。负值意味着图像会相对于其默认位置向相反的方向移动。例如，在提供的代码示例中，`.style2`类的`background-position`设置为`-50px -50px;`。这意味着图像会在水平方向上向左移动50像素，同时在垂直方向上向上移动50像素。结果是，图像相对于元素的左上角位置向内移动，而不是向外扩展。
为了更好地理解这一点，我们可以想象元素的内容区域为一个坐标轴，其中左上角是原点(0,0)，向右和向下是正方向，而向左和向上是负方向。因此，`-50px -50px;`表示图像向左上角移动，使得图像的左上角与元素内容区域的中心对齐。
在实际应用中，我们可能知道图像中某个特定点应该在元素的特定位置。例如，如果目标是让图像上一个黄色点位于元素的中间，我们可以通过测量图像和元素的尺寸来计算偏移量。假设黄色点距离图像左上角150像素，那么在水平和垂直方向上都需要-150px的偏移，即`background-position: -150px -150px;`。
总结一下，要记住的关键点是：
1. `background-position`的负值会使背景图像向相反方向移动。
2. 水平和垂直偏移量可以独立设置，且可以是负值。
3. 背景图像的定位基于元素内容区域的坐标系，左上角为(0,0)。
4. 在实践中，根据设计图测量并计算出偏移量，可以帮助准确地定位背景图像。
理解这些概念对于精确控制网页上背景图像的显示至关重要，特别是在创建复杂的布局和交互式设计时。通过熟练运用`background-position`的负值，设计师和开发者可以实现更细腻的视觉效果和用户体验。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
