用 linear-gradient 替代首屏背景图可省 http 请求、规避 dpr 适配与 vh 跳变问题，是移动端首屏优化最立竿见影的手段之一；需双层渐变、明确高度、禁用 center 定位，并非万能，关键信息图仍需图片方案。
直接用 linear-gradient 替代首屏大背景图，能省掉 HTTP 请求、规避 DPR 适配问题、避免容器高度塌陷导致的“图不显示”，是移动端首屏加载优化中最立竿见影的手段之一。
为什么 background-image 在移动端首屏容易出问题
不是图不够大，而是它天生和移动端渲染机制“不对付”：
-
background-image不支持loading="lazy"，也无法参与 HTML 解析阶段的预加载，首屏图总在 CSSOM 构建完才发起请求 - 高 DPR 设备（如 iPhone）下，若没配
@2x图 + 媒体查询 + 显式background-size，浏览器会强行拉伸 1x 图，结果就是模糊 - 容器没高度（比如只写了
min-height: 100vh）时，Safari 地址栏收放会让vh动态跳变，背景图直接“消失一截” - 哪怕图加载成功，
background-size: cover在窄高比设备（如 19.5:9）上必然裁上下，关键文案或人脸区域被切掉
用 linear-gradient 实现等效背景的写法要点
渐变不是“凑合”，而是更可控的替代方案。重点不在颜色过渡，而在结构模拟与响应行为：
- 单层渐变不够 —— 必须用两层：
background-image: linear-gradient(...), linear-gradient(...)，第一层是主色块（如深蓝），第二层是叠加纹理（如细微噪点或斜线） -
background-size要设具体值（如4px 4px），否则斜线纹理会随容器缩放失真；若要模拟“微光感”，第二层可用rgba(255,255,255,0.05)+10px 10px - 避免用
background: linear-gradient(...)简写 —— 它会覆盖掉background-color和background-position，导致 fallback 失效 - 想保留“图片感”？加一层
background-blend-mode: multiply，让渐变和浅灰底色混合出层次，比纯色更耐看
如何让渐变背景在不同屏幕下“看起来像一张图”
关键不是让它“填满”，而是让它“稳住”并“可读”：
- 容器必须有明确高度：优先用
min-height: 100dvh（iOS 16+），降级用@supports not (height: 100dvh) { min-height: 100vh; } - 禁止写
background-position: center center—— 渐变没有“内容区域”，center没意义；改用background-position: top或bottom控制视觉重心 - 小屏需突出文字？在
@media (max-width: 480px)里把主渐变角度从-45deg改成0deg（水平过渡），减少视觉干扰 - 需要“呼吸感”？给
background-size加动画：用@keyframes微调background-size: 390px 390px→410px 410px，循环周期 8s，人眼几乎察觉不到但观感更活
哪些场景不适合直接换渐变
渐变不是万能胶，硬套反而露馅：
- 真实摄影图承载关键信息（如产品主图、人物肖像、地图）—— 渐变无法传递细节，此时必须用
<img>+srcset+ WebP - 需要精确控制明暗分区（如左亮右暗引导视线）—— 渐变角度和色标位置难微调到像素级，不如切图精准
- 设计稿本身含复杂图案（如品牌纹理、手绘边框）—— CSS 渐变生成不了矢量精度，SVG 或内联
data:image/svg+xml更稳妥 - 已有大量
background-image的 legacy 代码，且无构建工具支持批量替换 —— 先在新模块试点，别全局扫荡
真正省时间的，从来不是“全换成渐变”，而是判断哪一块背景图对用户认知不重要、但对加载拖累最大——那块，就换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
