CSS无法实现WebP降级，因background-image不支持格式协商；必须用显式声明type="image/webp"并兜底，或依赖服务端根据Accept头动态返回对应格式。
CSS 无法优雅处理 WebP 降级——它根本做不到格式协商，任何尝试用 background-image 配多个 URL 或伪类 fallback 的写法，最终都会在 Safari ≤13.1、IE、旧 Android WebView 中加载失败并留白。
为什么 background-image: url(x.webp) 没有 fallback 能力
CSS 的 background-image 是单值声明，浏览器只取第一个有效值；写成 background-image: url(a.webp), url(a.jpg) 不会触发“备选”，而是直接忽略整个声明（语法错误）或仅加载第一个。不支持 WebP 的浏览器遇到 url(a.webp) 时：
- 不发请求（Safari ≤13.1、IE）
- 或发请求但服务器返回 406 Not Acceptable / Content-Type: text/plain 导致解码失败
- 最终背景为空，且无日志、无事件、不可监听
想让背景图支持 WebP → JPEG，只能靠服务端内容协商
前端纯 CSS 方案不存在可靠降级路径，必须后端配合 Accept 头识别能力：
- 浏览器请求带 Accept: image/webp,image/avif,*/*
- 服务端根据该头 + UA 判断是否返回 .webp 或 .jpg
- Nginx 需配置 types { image/webp webp; }，否则 .webp 文件被当 application/octet-stream 拒绝渲染
- CDN 必须透传 Accept 头，否则后端永远收不到协商信号
- 前端只需写 background-image: url(/img/logo.jpg); —— 后端动态响应真实格式，路径保持一致
替代方案：用
如果非得在前端控制格式，且图片语义明确（如 logo、banner、icon），应放弃 background-image，改用内联 type="image/webp" 显式协商，现代浏览器自动跳过不支持项
- src 是 IE 等老环境唯一入口，必须指向静态可直访的 JPG/PNG
- 可结合 loading="eager" 和 fetchpriority="high" 保障首屏关键图 LCP
- 若需视觉上“像背景图”，用 CSS 定位 + position: absolute + z-index 覆盖，比 hack CSS 更可控、更可测
真正容易被忽略的点是：很多人以为把 WebP 地址塞进 CSS 就算做了优化，结果在 iOS 13.3 的企业微信 WebView 里整块区域空白——那不是样式没生效，是浏览器压根没尝试加载，连 Network 请求都不会出现。降级这件事，前端能做的边界很清晰：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
