本文详解如何利用多层 css 背景（图片 + 线性渐变）精准构建“左半为高清图片、右下角带斜切色块”的现代网页首屏布局，无需 javascript 或额外 dom 元素。
实现“半图半色 + 斜切角”效果的关键在于 CSS 多背景叠加与渐变作为遮罩的巧妙运用。所谓“半图半色”，并非简单左右平分，而是通过 linear-gradient 在图片背景上叠加一个透明/实色过渡区域，从而在视觉上形成自然切割——例如让右侧 30% 区域被深紫色三角形覆盖，左侧 70% 完整展示图片。
下面是一个完整、可直接运行的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Half-Image Half-Color Layout</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
header {
height: 100vh;
background-image:
/* 第一层：斜切色块（从右下向左上延伸的渐变） */
linear-gradient(140deg, transparent 70%, #8a2be2 70%),
/* 第二层：背景图片（置于底层） */
url(https://picsum.photos/id/237/1200/800);
background-size: cover;
background-position: center right; /* 图片锚定右侧，确保左侧内容区清晰可见 */
background-repeat: no-repeat;
padding: 2rem;
position: relative;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
nav {
background-color: gold;
padding: 1rem 2rem;
display: inline-block;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
h1 {
font-size: 3.5rem;
margin-top: 2rem;
max-width: 600px;
line-height: 1.2;
}
@media (max-width: 768px) {
header {
background-position: center;
padding: 1.5rem;
}
h1 { font-size: 2.5rem; }
}
</style>
</head>
<body>
<header>
<nav>导航栏示例</nav>
<h1>沉浸式视觉布局：图像与色彩的精准分割</h1>
</header>
</body>
</html>✅ 核心原理说明：
- 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 屏与响应式缩放。掌握多背景叠加与渐变定位，你就能自由构建封面页、产品展示区、落地页首屏等各类高表现力视觉模块。
