本文详解如何利用多层 css 背景（图片 + 线性渐变）精准构建“左半为高清图片、右下角带斜切色块”的现代网页首屏布局，无需 javascript 或额外 dom 元素。
实现“半图半色 + 斜切角”效果的关键在于 CSS 多背景叠加与渐变作为遮罩的巧妙运用。所谓“半图半色”，并非简单左右平分，而是通过 linear-gradient 在图片背景上叠加一个透明/实色过渡区域，从而在视觉上形成自然切割——例如让右侧 30% 区域被深紫色三角形覆盖，左侧 70% 完整展示图片。
下面是一个完整、可直接运行的示例：
Half-Image Half-Color Layout 沉浸式视觉布局：图像与色彩的精准分割
✅ 核心原理说明：
- background-image 支持逗号分隔的多值，后声明的图层在下，先声明的在上（即渐变盖在图片之上）；
- linear-gradient(140deg, transparent 70%, #8a2be2 70%) 创建了一个从右下方向左上方延伸的斜切线——70% 之前全透明（透出底图），70% 之后突变为实色，形成干净利落的切割边界；
- background-position: center right 确保图片主体始终居右显示，避免关键内容（如人脸或主视觉）被渐变遮挡；
- 响应式增强：添加了移动端适配，当屏幕变窄时自动居中图片并调整内边距，保障小屏可读性。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 background-attachment: fixed，否则多背景可能错位；
- 渐变角度（如 140deg）需根据实际设计微调——角度越小越接近水平切，越大越陡峭；百分比（如 70%）控制切割位置，建议在 Chrome DevTools 中实时拖动修改验证；
- 若需兼容 IE，需降级为伪元素 ::before + clip-path 方案，但现代项目推荐坚持 CSS 多背景方案（支持所有主流浏览器，包括 Safari 12.1+）。
这种设计不仅轻量高效，还天然支持 Retina 屏与响应式缩放。掌握多背景叠加与渐变定位，你就能自由构建封面页、产品展示区、落地页首屏等各类高表现力视觉模块。
