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); —— 后端动态响应真实格式，路径保持一致
替代方案：用 <picture></picture> 替代背景图（适用图标、装饰性图）
如果非得在前端控制格式，且图片语义明确（如 logo、banner、icon），应放弃 background-image，改用内联 <picture></picture>：
- <picture></picture> 支持 type="image/webp" 显式协商，现代浏览器自动跳过不支持项
- <img alt="如何用CSS优雅处理WebP格式图片在不支持环境下的降级加载？" > 的 src 是 IE 等老环境唯一入口，必须指向静态可直访的 JPG/PNG
- 可结合 loading="eager" 和 fetchpriority="high" 保障首屏关键图 LCP
- 若需视觉上“像背景图”，用 CSS 定位 + position: absolute + z-index 覆盖，比 hack CSS 更可控、更可测
真正容易被忽略的点是：很多人以为把 WebP 地址塞进 CSS 就算做了优化，结果在 iOS 13.3 的企业微信 WebView 里整块区域空白——那不是样式没生效，是浏览器压根没尝试加载，连 Network 请求都不会出现。降级这件事，前端能做的边界很清晰：<picture></picture> 是上限，CSS 是下限，越界就只剩服务端兜底。
