本文详解如何利用 css 多背景层叠与线性渐变，精准实现左半为图片、右半为纯色（带斜角切割）的响应式设计，无需 javascript 或复杂框架。
在现代网页设计中，“半图半色 + 斜切分割”是一种极具视觉张力的布局手法——左侧呈现高清图片，右侧以高对比纯色填充，并在交界处形成干净利落的斜向切割（如 140° 角度的三角形过渡）。这种效果并非依赖两张独立容器拼接，而是通过 CSS 的 background-image 多值叠加能力，将一张图片与一个方向可控的线性渐变（linear-gradient）合成为单个元素的复合背景。
核心原理在于：
✅ 渐变作为“遮罩层”覆盖在图片之上；
✅ 利用 transparent 与实色的硬性切换点（如 70%），精确控制切割位置；
✅ background-position: right 确保图片锚定右侧，使左侧自然显露渐变色区；
✅ background-size: cover 保证图片自适应且不失真。
以下为可直接运行的完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>半图半色斜切布局</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
header {
height: 100vh;
background-image:
linear-gradient(140deg, transparent 70%, #4a00e0 70%), /* 斜切渐变：从透明到深紫 */
url('https://picsum.photos/id/237/1200/800'); /* 高清背景图 */
background-size: cover;
background-position: right center; /* 图片靠右居中显示 */
background-repeat: no-repeat;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
nav {
background-color: #FFD700; /* 金色导航栏，增强视觉层次 */
padding: 1rem 2rem;
border-radius: 4px;
display: inline-block;
font-weight: bold;
color: #333;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* 响应式优化：小屏下调整切割比例，避免内容被遮挡 */
@media (max-width: 768px) {
header {
background-image:
linear-gradient(135deg, transparent 60%, #4a00e0 60%),
url('https://picsum.photos/id/237/800/600');
}
}
</style>
</head>
<body>
<header>
<nav>Modern Design • Half Image & Half Color</nav>
</header>
</body>
</html>? 关键技巧说明：
- 切割角度（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）的理想实践。
