如何在CSS中针对不同DPI加载不同倍率图片-css教程-PHP中文网

最常见原因是浏览器兼容性问题：firefox 128 完全忽略 image-set()，safari ≤15.3 缺 1x 则整条丢弃，chrome/safari 要求 url("a.png") 1x 格式完整且引号统一；必须按三行 fallback 顺序书写并确保资源路径正确。

如何在css中针对不同dpi加载不同倍率图片

background-image 用 image-set() 为什么没效果

最常见原因不是写错了，而是浏览器压根没解析它：Firefox（v128）至今完全跳过 image-set()，整条声明静默丢弃；Safari ≤15.3 遇到缺失 1x 项就直接忽略整条；Chrome/Safari 要求路径必须是 url("a.png") 1x 这种带括号、引号、单位的完整写法，漏掉任一环节都失效。

必须满足这些硬性条件：

1x 必须存在，且只能写成 1x（不能是 1 或 1dppx）
所有路径必须用 url() 包裹，引号类型统一（全单引号或全双引号）
构建工具（Vite/Webpack）不会处理 image-set() 里的路径，bg@2x.png 若没打进 dist 目录，高 DPR 屏直接 404
不能和 background-image: url() 写在同一行用逗号拼接，否则整条被当无效值丢弃

兼容所有浏览器的三行 fallback 写法

真正能落地的方案，是靠 CSS 声明顺序“试错”：浏览器从上到下逐条解析，跳过不支持的，执行能识别的。必须严格按这个顺序写：

background-image: url("logo@1x.png");
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);

第一行是通用 fallback，所有浏览器都认；第二行专供老 Safari（iOS 14.5 及更早），-webkit- 必须写在第三行之前，否则 Safari ≥16.4 可能漏掉 1x；第三行给现代 Chrome/Safari，但 Firefox 完全跳过——所以第一行绝不能省。

所有路径、引号、空格、单位必须完全一致，否则某些浏览器会因校验失败而丢弃整条声明。

@media 查询比 image-set() 更可控的场景

当你需要同时响应屏幕宽度和 DPR（比如 iPad Pro 横屏加载大图+高清图，手机竖屏加载小图+高清图），image-set() 就无能为力——它只看 DPR，不看 min-width。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐用复合媒体查询兜底：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hero { background-image: url("hero@2x.png"); background-size: 750px auto; }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .hero { background-image: url("hero@3x.png"); background-size: 750px auto; }
}

注意几点：

顺序不能颠倒：1x 规则必须写在最前（即默认 url("hero@1x.png")）
避免混用 and：写成 @media (min-width: 768px) and (min-resolution: 2dppx) 会导致部分 Chrome 在高系统缩放下漏匹配
background-size 必须写具体值（如设计稿宽 750px 就写 750px auto），否则 @2x 图在小容器里会被拉伸模糊