如何用 CSS 实现“半图半色+斜切分割”的现代网页布局
本文详解如何利用 css 多背景层叠与线性渐变，精准实现左半为图片、右半
为纯色（带斜角切割）的响应式设计，无需 javascript 或复杂框架。
在现代网页设计中，“半图半色 + 斜切分割”是一种极具视觉张力的布局手法——左侧呈现高清图片，右侧以高对比纯色填充，并在交界处形成干净利落的斜向切割（如 140° 角度的三角形过渡）。这种效果并非依赖两张独立容器拼接，而是通过 CSS 的 background-image 多值叠加能力，将一张图片与一个方向可控的线性渐变（linear-gradient）合成为单个元素的复合背景。
核心原理在于：
✅ 渐变作为“遮罩层”覆盖在图片之上；
✅ 利用 transparent 与实色的硬性切换点（如 70%），精确控制切割位置；
✅ background-position: right 确保图片锚定右侧，使左侧自然显露渐变色区；
✅ background-size: cover 保证图片自适应且不失真。
以下为可直接运行的完整示例代码：
半图半色斜切布局
? 关键技巧说明：
- 切割角度（140deg）决定斜边倾斜程度，角度越小越平缓，越大越陡峭；
- 70% 是渐变色开始出现的位置，数值越小，彩色区域越宽（反之图片区域越宽）；
- 图片 URL 推荐使用高宽比接近 4:3 或 16:9 的资源，并确保 background-position: right center 使主体内容不被裁切；
- 务必添加 box-sizing: border-box 和 background-repeat: no-repeat，避免意外偏移或重复。
⚠️ 注意事项：
- 不要尝试用 Bootstrap 的栅格系统强行“左右分栏”来模拟该效果——这会导致响应断裂、视差错位及维护困难；
- 避免在 background-image 中混用 url() 和 radial-gradient() 等不同渐变类型，兼容性可能下降；
- 如需文字内容清晰可读，建议在 header 内叠加半透明白色遮罩层（::before 伪元素）或设置足够对比度的文字颜色。
这一方案轻量、语义清晰、完全响应式，是构建高端落地页首屏（Hero Section）的理想实践。
