通过设置 background-position 的垂直偏移值为负数，可将背景图像向上平移，使其上半部分被容器裁剪隐藏，仅显示下半部分，实现“底部半图可见”的视觉效果。
通过设置 `background-position` 的垂直偏移值为负数，可将背景图像向上平移，使其上半部分被容器裁剪隐藏，仅显示下半部分，实现“底部半图可见”的视觉效果。
在 CSS 中，background-position 不仅支持关键字（如 top、center），也支持精确的长度值（如 px、rem、%）。当需要让背景图像只显示下半部分，同时让上半部分被父容器自然裁剪（等效于 overflow: hidden 效果），核心思路是：将图像向上偏移其自身高度的一半。
假设你的背景图像高度为 1018px，那么设置 background-position: center -509px 即可将其垂直中心点从默认居中位置上移 509px——结果是图像顶部边缘被推至容器顶部上方 509px 处，而底部 509px 则恰好填满容器可视区域，达成“仅见下半幅”的效果。
✅ 正确写法示例：
.container {
background-image: url('./images/bg-pattern-circles.svg');
background-repeat: no-repeat;
background-position: center -509px; /* 关键：负值偏移 = -imageHeight / 2 */
padding: 10rem 2.5rem 8rem;
position: relative;
border-radius: 0 7rem 0 7rem;
width: 100%;
text-align: center;
color: hsl(0, 0%, 100%);
line-height: 1.5;
/* 注意：无需显式设置 overflow: hidden —— 父容器默认已裁剪溢出内容 */
}
⚠️ 注意事项：
- 图像尺寸需预先知晓：推荐使用设计工具或 img 标签临时加载图像并检查尺寸，或通过 getBoundingClientRect() 在 JS 中动态获取（适用于响应式场景）。
- 响应式适配建议：若需适配不同屏幕，可改用百分比定位（如 background-position: center 100%）配合 background-size: cover，但该方式无法精确控制“仅半图”，故静态图像推荐使用固定像素偏移。
- 层级与遮罩：当前代码中 .container::before 用于叠加渐变蒙层，因其 z-index: -1 且 position: absolute，不会干扰背景图像定位；确保其 height: 100% 与容器内容区高度一致，避免遮挡或留白异常。
- 可维护性提示：在 CSS 中为偏移值添加注释（如 /* -509px = -1018px/2 for bg-circle.svg */），便于后续更新图像后快速调整。
总结：背景图像的精准视觉裁剪不依赖 JavaScript 或额外 DOM 元素，纯 CSS 即可实现。掌握 background-position 的数值化控制逻辑，是构建现代、轻量、高性能背景布局的关键技能之一。
