safari需-webkit-image-set()因≤16.4版本对标准image-set()解析不完整，可能跳过函数或漏掉1x项致高分屏fallback失效；-webkit-前缀启用其自研稳定实现（自6.1起支持），且必须置于无前缀版本之前。
为什么 Safari 需要 -webkit-image-set() 而不是直接用 image-set()
因为 Safari（尤其 ≤16.4）对标准 image-set() 的解析不完整：它要么跳过整个函数，要么漏掉 1x 项导致高分屏 fallback 失效。加 -webkit- 前缀是告诉 Safari “用我自己的实现逻辑来解析”，而这个前缀版本早在 Safari 6.1 就已稳定支持。
关键点：
-
-webkit-image-set()必须写在image-set()之前，否则 Safari 16.4+ 可能忽略1x项 - Chrome 和新版 Edge 已完全支持无前缀
image-set()，但写上-webkit-不会报错，只是多一条兼容声明 - Firefox v128（2026年6月）仍完全不支持两者，整行声明会被静默丢弃
-webkit-image-set() 和 image-set() 的参数必须完全一致
浏览器不会“智能纠错”——哪怕多一个空格、引号类型不统一、路径里有空格没加引号，都可能导致整条声明被丢弃。比如 url("logo@2x.png") 2x 和 url('logo@2x.png') 2x 在同一组声明中混用，Safari 就可能拒绝解析。
实操建议：
- 所有
url()统一用双引号，尤其路径含@或空格时（如url("icon@2x.png")） - 描述符严格用
1x/2x，不能省略x，也不能写成dppx - 两个函数里的路径、空格数、单位顺序必须一字不差，否则部分引擎静默失效
为什么写了前缀还是没效果？常见静默失败原因
不是语法错了，而是浏览器压根没执行这条声明——它被跳过了。最典型的三种情况：
- Firefox 下整行划掉：v128 仍不支持，直接跳过，靠前面的
url()fallback 生存 - Safari 中背景空白：漏了
-webkit-image-set()，或把它写在了image-set()后面 - 高分屏加载了
2x图却依然模糊：background-size: cover放大了 DPR 切换误差，实际渲染像素没对齐
构建工具（Vite/Webpack）不处理 image-set() 中的路径
Webpack/Vite 的 CSS loader 默认只解析 url()，但 image-set() 里的 url() 是函数参数，不是独立声明，所以不会自动拷贝 logo-2x.png 到 dist 目录。运行时 404，fallback 到 1x 图后照样模糊。
解决方式只有两种：
- 手动确保所有
image-set()引用的资源都在构建产物中（比如放进public/并用绝对路径） - 改用
@media (-webkit-min-device-pixel-ratio: 2)+ 多层background-image，由构建工具正常处理每条url()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
