17370845950

本文详解如何通过多层 css 背景（图片 + 线性渐变）精准构建「左半为真实图片、右下半为纯色、分界线呈斜角切割」的现代网页首屏布局，无需 javascript 或复杂框架，纯 css 即可实现。

这种“半图半色 + 斜切分界”的设计（如参考图中左图右紫、斜向切割的效果）本质是利用 CSS 的多背景叠加能力——将一张覆盖全区域的背景图与一个方向可控的线性渐变（作为“遮罩”或“色块”）组合使用，通过 background-image 同时声明两者，并借助 background-size 和 background-position 精确控制各自渲染范围。

核心原理在于：渐变本身是透明/不透明的色带，当它与背景图层叠时，会自然“覆盖”或“露出”底层图像。例如，以下代码中：

header {
  background-image: 
    linear-gradient(140deg, transparent 70%, darkviolet 70%),    
    url(https://picsum.photos/id/237/500/300);
  background-size: cover, cover;
  background-position: right top, center;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 2rem;
}

• 第一层 linear-gradient(140deg, transparent 70%, darkviolet 70%) 是一个从左下向右上倾斜的渐变：前 70% 为透明（透出下方图片），后 30% 突变为深紫（darkviolet），形成锐利斜切边；
• 第二层 url(...) 是实际图片，设为 cover 并居中显示；
• 因为 CSS 背景图层叠顺序为「声明在前的在上层」，所以渐变层盖在图片之上，从而实现“右下紫色三角覆盖、左上保留原图”的视觉效果。

✅ 关键技巧提示：

• 调整 linear-gradient 的角度（如 135deg / 140deg / 150deg）可改变斜切方向；
• 修改百分比（如 65%, 75%）可控制切割位置，实现更精确的“半图半色”比例；
• 使用 background-position: right top 可确保渐变锚点对齐右上角，避免错位；
• 建议始终设置 background-repeat: no-repeat 防止渐变平铺干扰效果。

⚠️ 注意事项：

• 此方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2015），无需 Polyfill；
• 避免在 * 全局重置中滥用 margin: 0（如原示例），建议仅重置 body 或使用 box-sizing: border-box 提升健壮性；
• 若需响应式适配移动端，可配合媒体查询微调 background-size 或渐变角度（例如小屏改用 120deg 以增强垂直切割感）。

总结：该设计并非依赖 Bootstrap 栅格或伪元素裁剪，而是回归 CSS 本源能力——多背景 + 渐变 = 精准可控的视觉分割。掌握此模式后，你还能轻松延展实现“四分之一色块”、“弧形过渡”甚至“动态渐变蒙版”，真正以简驭繁。