如何让背景图严格限制在圆角白框内不溢出

当使用 `background-size: cover` 和 `border-radius` 时，背景图可能超出圆角边界；只需为带圆角的容器添加 `overflow: hidden` 即可强制裁剪溢出内容。

在 css 中，border-radius 仅影响元素的边框与背景的绘制区域外观，但不会自动裁剪子元素或背景图像的渲染范围。即使父容器设置了圆角，其内部的绝对定位元素（如 .overlay）或背景图仍可能突破视觉边界——尤其当 width/height 超过容器尺寸（例如 width: 105%）或存在 transform 偏移时。

解决该问题的核心原则是：显式启用容器的裁剪上下文。为此，需在具有 border-radius 的容器（即 .whitebox）上添加：

div.whitebox {   /* ...原有样式... */   border-radius: 3%;   overflow: hidden; /* ✅ 关键修复：创建裁剪边界 */ }

✅ overflow: hidden 会为该元素建立一个新的块级格式化上下文（BFC），并使其成为裁剪容器（clipping container），所有超出其 padding box（含圆角）的内容（包括子元素、背景图、伪元素及 transform 移动后的区域）都将被严格裁剪。

⚠️ 注意事项：

• 不要仅依赖 border-radius 期望自动裁剪——它不具备裁剪功能；
• 若 .overlay 使用了 transform: translate() 或旋转，确保其父容器（.titleclass）也设置了 overflow: hidden（当前代码中已存在，是良好实践）；
• 避免对 body 或 html 设置 overflow: hidden，以免影响全局滚动；
• overflow: hidden 不会影响 flex/Grid 布局行为，但会隐藏任何溢出的子内容（包括 tooltip、下拉菜单等），请按需权衡。

完整修复后的关键 CSS 片段如下：

div.whitebox {   position: relative;   left: -5%;   width: 75%;   height: 75%;   background-color: white;   border-radius: 3%;   overflow: hidden; /* ← 必加！否则圆角仅为“视觉装饰”，无裁剪效果 */ }

如此修改后，无论 .overlay 如何通过 transform 扩展或偏移，都会被 .whitebox 的圆角边界精准裁剪，实现真正“内嵌于白框”的视觉效果。