如何解决CSS中图片在Retina屏模糊问题_通过image-set设置多倍图-css教程-PHP中文网

image-set() 仅对 background-image 生效，需配合显式 background-size、容器像素对齐及构建产物路径真实存在才能解决 retina 模糊；不支持标签，firefox 需前缀，ie 全系不支持。

如何解决css中图片在retina屏模糊问题_通过image-set设置多倍图

image-set() 能解决 CSS 背景图在 Retina 屏模糊问题，但仅当浏览器支持且用法正确时才生效——它不替代 srcset，也不适用于 <img> 标签。

为什么 `image-set()` 有时没效果

根本原因不是语法写错，而是浏览器兼容性或上下文误用：

image-set() 只对 background-image 生效，<img> 标签必须用 srcset + sizes
Safari 9+、Chrome 39+、Edge 16+ 支持，Firefox 直到 2025 年底仍需前缀 -webkit-image-set()，IE 全系不支持
如果父元素未设宽高，或 background-size 缺失/设为 auto，高清图加载后仍被拉伸，看起来还是糊
构建工具（如 Vite）默认不处理 image-set() 中的路径，"logo@2x.png" 若未实际输出到 dist 目录，404 后会 fallback 到 1x 图

`image-set()` 的正确写法与参数差异

必须同时声明 1x 和 2x（或 3x）资源，并用描述符明确标注设备像素比：

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

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

下载

.icon {
  background-image: image-set(
    "icon-24.png" 1x,
    "icon-48.png" 2x
  );
  background-size: 24px 24px; /* 关键：按设计稿逻辑尺寸设 */
  width: 24px;
  height: 24px;
}

不要混用单位："icon-24.png" 1x, "icon-48.png" 2x 是合法的；"icon-24.png" 24w 在 image-set() 中无效
文件物理尺寸必须匹配描述符：2x 图宽高得是 1x 图的 2 倍（如 24px → 48px），不能靠 CSS 缩放“假装”高清
不支持响应式宽度切图（如 400w），只响应设备像素比，和 srcset 的 w 描述符逻辑完全不同

搭配媒体查询才是稳妥 fallback 方案

仅靠 image-set() 在老 Chrome 或部分安卓 WebView 中可能完全失效，必须用媒体查询兜底：

.icon {
  background-image: url("icon-24.png");
  background-size: 24px 24px;
}
<p>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.icon {
background-image: url("icon-48.png");
}
}</p>