HTML 通栏背景图页头：四行 CSS 定全局

页头一张通栏大图压住首屏，是市场页与内容页都常用的开场。结构极简，一张图加一段标题，四行 CSS 决定最终质感。

结构

<header class="hero">
  <h1>页面标题</h1>
</header>

背景图属于装饰，写在 CSS 里，不放 img 标签。img 表达内容，background 表达气氛，通栏大图属于后者。

四行核心样式

.hero {
  background-image: url('/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;
  background-color: #1a2233;
}

逐行的作用

cover 让图片铺满容器，多余部分裁掉，任何屏幕比例下都不留边。center 决定裁剪时保住画面中心，人物类素材可改为 center top 保住脸部。

no-repeat 防止小图平铺，素材尺寸不足时的兜底。

min-height 而不是 height，内容超出时容器随内容增长，移动端文字换行不溢出。

background-color 与主图色调接近，图片加载失败或加载中的空窗期，页面不至于一片白。

两个补充

图上压文字时加一层渐变遮罩，从透明到深色，文字对比度才有保障。素材宽度至少一千九百二十像素，大屏拉伸后才不会发虚，体积控制在三百 KB 以内。