通栏背景图应直接用<header class="hero">包裹内容，禁用<img>标签；CSS需设background-size: cover、background-position: center center、background-repeat: no-repeat及min-height: 100vh，并加background-color兜底。
通栏背景图的 HTML 结构怎么写才不踩坑
直接用 <header> 包裹一个 <div> 即可，别套多余容器，也别用 <img> 标签塞背景图——那是内容图，不是背景。浏览器会默认给 <img> 留出 4px 下边距（因行内元素基线对齐），导致底部白边，且无法响应式拉伸填充。
正确结构示例：
<header class="hero">
<div class="hero-content">
<h1>欢迎来到首页</h1>
</div>
</header>CSS 设置 background-image 的关键参数
仅设 background-image 不够，必须配齐控制行为的属性，否则在不同设备上要么留白、要么裁切错位、要么重复平铺。
-
background-size: cover—— 拉伸填满容器，可能裁边，适合强调视觉冲击 -
background-size: contain—— 完整显示整张图，可能留白，适合 Logo 或图标型图 -
background-position: center center—— 避免图偏移，尤其在cover下很重要 -
background-repeat: no-repeat—— 必加，防止小图被平铺 -
height: 100vh—— 让<header>占满视口高度；若内容需滚动露出，改用min-height: 100vh
完整样式片段：
立即学习“前端免费学习笔记（深入）”；
.hero {
background-image: url('hero-bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100vh;
position: relative;
}文字层叠在背景图上要加什么保护
纯色背景能看清文字，但图片明暗不一，容易让标题看不清。不能只靠字体加粗或改色硬扛，得用视觉缓冲层。
- 在
.hero-content外再包一层<div class="hero-overlay">，用半透黑色遮罩：background: rgba(0,0,0,0.4) - 或直接在
.hero上叠加伪元素：::before+absolute+z-index控制层级 - 文字本身建议加
text-shadow: 0 2px 4px rgba(0,0,0,0.5)，比单纯调高对比度更稳妥 - 避免把文字放在图中天空/纯色区域——那些地方常是渐变过渡带，实际部署时可能突然变灰变糊
移动端适配和性能要注意的三件事
PC 看着好好的图，手机上可能加载慢、模糊、甚至触发横向滚动条。
- 图宽至少 1920px，但用
srcset和sizes属性提供多尺寸版本，否则小屏也下 3MB 图 - 禁用
background-attachment: fixed—— iOS Safari 和部分安卓 WebView 会卡顿或失效 - 加
background-color: #222作为兜底色，等图加载期间不露白底，尤其弱网环境
兜底色写法示例：
.hero {
background-color: #222;
background-image: url('hero-bg.jpg');
/* 其他 background-* 属性 */
}背景图加载完成会自然覆盖掉纯色，但用户感知不到闪烁——这才是真正可用的通栏。
