通过css背景定位与内容区域遮罩结合，可实现在容器左右边缘各显示20%宽度的背景图，中间60%区域展示纯色内容层，从而营造“背景仅出现在两侧”的视觉效果。
通过css背景定位与内容区域遮罩结合，可实现在容器左右边缘各显示20%宽度的背景图，中间60%区域展示纯色内容层，从而营造“背景仅出现在两侧”的视觉效果。
要实现背景图像仅在屏幕左右边缘可见（各占约20%宽度），而中间60%区域显示内容（如文字、卡片等）且背景不可见，核心思路并非“裁剪背景”，而是：让背景铺满整个容器，再用一个居中、宽度为60%的不透明内容层覆盖中间区域，从而自然“露出”左右两侧的背景。
以下为完整、可直接运行的解决方案：
<div class="container">
<div class="content">
<h2>Example Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
.container {
flex: 1;
display: flex;
flex-direction: column;
margin-top: 20px;
/* 全屏背景图（关键：覆盖整个容器） */
background-image: url("https://via.placeholder.com/800");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* 居中对齐内容区域（可选，提升视觉平衡） */
justify-content: center;
align-items: center;
/* 确保容器占据可用空间（尤其在Flex父容器中） */
min-height: 100vh;
}
.content {
/* 关键：宽度设为60%，留出左右各20%空白 → 背景自然显露 */
width: 60%;
/* 覆盖中间区域，防止背景透出 */
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
/* 可选：确保内容层不被背景干扰 */
position: relative;
z-index: 1;
}
✅ 关键要点说明：
- width: 60% 是实现“左右各20%露出”的数学基础（100% − 60% = 40% → 左右均分即各20%）；
- .content 的 background: white（或任意不透明色）是遮挡中间背景的核心；
- background-size: cover + background-position: center 确保图像始终居中拉伸，左右边缘内容稳定可见；
- 若需响应式适配，可将 60% 替换为 clamp(40%, 60%, 80%) 或配合媒体查询调整；
- ⚠️ 注意：此方案依赖“内容层遮罩”，而非CSS clip-path 或 mask（后者兼容性较差且难以精准控制百分比边缘）。
该方法简洁、兼容性强（支持所有现代浏览器及IE11+），无需JavaScript，语义清晰，是实现“边缘背景”效果的推荐实践。
