### [HTML 通栏背景图页头：四行 CSS 定全局](https://www.huociguo.com/article/1768)

**Published:** 2026-10-02T09:58:11

**Author:** 米了

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

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

![开阔的山地全景](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-140117.jpeg)

宽幅素材是通栏页头的基础。图片来自 Pexels。

## 结构

<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 以内。

**Tags:** background-size, Hero图, 响应式布局, 盒模型, 通栏背景

**Categories:** HTML5

---