本文详解如何通过纯 css（无需图片裁剪或 javascript）实现左半为真实图片、右半为纯色且带斜向切割过渡的视觉设计，核心是叠加线性渐变与背景图并精准控制 `background-size` 和 `background-position`。
这种“半图半色 + 斜切分割”（也称“不对称梯形分割”或“角向切割背景”）是当前响应式网页中极具表现力的设计手法——它并非真的将图片切成两半，而是利用 CSS 多重背景（multiple backgrounds）的层叠特性，将一张覆盖全容器的图片与一个方向可控的线性渐变（作为“遮罩”或“色块”）合成呈现。
关键原理在于：CSS 中的 linear-gradient() 本质是一种背景图像，可与其他背景图（如 url(...)）一同写入 background-image，按从后到前的顺序堆叠（即最后声明的在最上层）。我们正是利用这一特性，让渐变“覆盖”图片的右侧部分，形成干净利落的斜切分界。
以下是一个完整、可直接运行的实现方案：
<!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 65%, #4a00e0 65%),
/* 下层：真实图片，靠右显示 */
url('https://picsum.photos/id/237/1200/800');
background-size: cover, cover;
background-position: right center, right center;
background-repeat: no-repeat;
padding: 2rem;
position: relative;
}
nav {
background-color: rgba(255, 215, 0, 0.92); /* 金色导航栏，带轻微透明增强层次感 */
padding: 1rem 2rem;
display: inline-block;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* 响应式增强：小屏下自动转为垂直分割 */
@media (max-width: 768px) {
header {
background-image:
linear-gradient(to bottom, transparent 50%, #4a00e0 50%),
url('https://picsum.photos/id/237/800/600');
background-position: center top, center;
}
nav { display: block; text-align: center; }
}
</style>
</head>
<body>
<header>
<nav>Example Navigation</nav>
</header>
</body>
</html>✅ 核心要点说明：
立即学习“前端免费学习笔记（深入）”；
- linear-gradient(140deg, transparent 65%, #4a00e0 65%)：140° 意味着从左下指向右上方向的斜线；65% 是渐变“硬停点”，决定切割位置（可微调 60%–75% 控制图片占比）；
- background-position: right center 确保图片始终锚定在容器右侧，与渐变自然衔接；
- 使用 rgba() 给导航栏添加轻微透明度，避免强对比破坏整体层次；
- 媒体查询中切换为 to bottom 渐变，使小屏设备呈现更友好的上下分割，兼顾可读性与设计一致性。
⚠️ 注意事项：
- 避免使用 Bootstrap 的 .row/.col 直接包裹此类背景容器——它会引入不必要的 flex 或 float 干扰背景定位；推荐用语义化 <header> + 纯 CSS 控制；
- 图片需足够宽（建议 ≥1200px），否则 background-size: cover 可能导致局部拉伸失真；
- 如需支持 IE，需提供 -ms-linear-gradient 回退，但现代项目中通常不再强制兼容。
这种设计轻量、高性能、完全响应式，且易于复用——只需替换图片 URL 和渐变色值，即可快速适配品牌视觉系统。掌握多重背景与渐变控制，是构建现代 Web 视觉语言的关键一步。
