本文介绍如何通过 css 多层背景与线性渐变叠加，精准控制页面左侧为纯色、右侧为图片的分屏背景布局，并确保响应式缩放时不拉伸、不偏移。
本文介绍如何通过 css 多层背景与线性渐变叠加，精准控制页面左侧为纯色、右侧为图片的分屏背景布局，并确保响应式缩放时不拉伸、不偏移。
在实际开发中，常需将页面背景设计为「左侧纯色 + 右侧图片」的视觉分屏效果（如登录页、营销首页），但直接设置 background-image 与 background-color 并不能实现“左右分区”——因为 background-color 会作为底层统一填充，无法限定区域。正确解法是：利用 CSS 多背景图层（comma-separated background-image）叠加一个带透明度过渡的线性渐变，遮罩出左侧纯色区、右侧透出图片区。
✅ 核心原理：渐变作为“蒙版层”
CSS 允许在一个元素上声明多个背景图层，语法为逗号分隔，顺序为从上到下堆叠（第一项在最顶层）。我们将：
- 顶层：linear-gradient —— 左侧不透明纯色 + 右侧完全透明，形成“硬切分”或“柔化过渡”；
- 底层：url(...) —— 实际背景图片，仅在渐变透明区域可见。
body {
height: 100vh;
margin: 0;
/* 顶层：从左向右的渐变（90deg），35%处硬切 */
/* 底层：图片，自动覆盖全容器 */
background-image:
linear-gradient(90deg,
rgba(0, 128, 128, 1) 35%, /* 左侧35%：不透明青绿色 */
rgba(0, 128, 128, 0) 35%), /* 从35%起：完全透明 → 图片显露 */
url(https://picsum.photos/2000);
background-size: cover; /* 关键：让图片自适应容器，避免拉伸 */
background-repeat: no-repeat;
background-position: center;
}? 为什么 background-size: cover 比 65vw 100vh 更可靠？
原代码中固定宽高（65vw 100vh）导致移动端视口变窄时，图片被强制压缩变形；而 cover 保证图片等比缩放并完全覆盖容器，结合渐变定位，天然适配所有屏幕。
? 进阶控制：微调透明度与过渡
若希望左侧颜色略带图片纹理（半透效果），或右侧图片受色调影响（如青绿滤镜），可调整渐变色值的 alpha 通道：
/* 示例：左侧90%不透明（轻微透图），右侧30%半透（柔化融合） */
body {
background-image:
linear-gradient(90deg,
rgba(0, 128, 128, 0.9) 35%,
rgba(0, 128, 128, 0.3) 35%),
url(https://picsum.photos/2000);
background-size: cover;
}此时左侧仍以青绿色为主，但隐约可见图片肌理；右侧则呈现青绿色调的图片，视觉更统一。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与最佳实践
- 移除冗余属性：原代码中 background-attachment: fixed 在多背景场景下易引发滚动错位，建议删除；max-width: 100% 对 body 无效，应作用于内容容器。
-
响应式增强：若需在小屏（如手机）切换为「全图+文字居中」布局，可在媒体查询中重置渐变断点：
@media (max-width: 768px) { body { background-image: linear-gradient(90deg, rgba(0, 128, 128, 1) 100%, rgba(0, 128, 128, 0) 100%), url(https://picsum.photos/2000); /* 或直接改为单图：background-image: url(...); */ } } - 性能提示：避免对 body 使用 background-attachment: fixed（触发合成层且耗性能），如需视差效果，建议用 position: fixed 的伪元素替代。
✅ 总结
通过 background-image 多层叠加 + linear-gradient 精确控制透明区域，你无需 JavaScript 或额外 DOM 元素，即可实现专业级背景分区。该方案：
- ✅ 完全响应式，适配任意视口；
- ✅ 语义清晰，CSS 可维护性强；
- ✅ 支持渐变软硬切换、色彩微调、色调融合；
- ✅ 兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 16）。
推荐使用 CSS Gradient 在线工具实时调试渐变参数，快速生成生产就绪代码。
