如何修复移动端背景图缩放导致的模糊_使用CSS3的多倍图控制技术-css教程-PHP中文网

根本原因是图源未适配设备像素比（dpr），须同时使用@2x/@3x图、复合媒体查询（-webkit-min-device-pixel-ratio与min-resolution并存）及显式background-size（如750px auto），三者缺一不可。

如何修复移动端背景图缩放导致的模糊_使用css3的多倍图控制技术

移动端背景图模糊，不是 background-size 写得不对，而是图源没匹配设备像素比（DPR）。换 @2x/@3x 图 + 正确 media query + 显式 background-size，三者缺一不可。

为什么只写 `background-size: cover` 还是糊

因为 cover 只控制缩放逻辑，不改变图源分辨率。1x 图在 iPhone 14（DPR=3）上被拉伸 3 倍渲染，浏览器用插值算法填充物理像素，结果就是毛边、发虚、文字边缘糊成一片。哪怕你设了 background-size: 750px auto，只要图还是 bg.jpg，照样糊。

常见错误现象：开发时在 Chrome 模拟器里看着清楚，真机 Safari 一打开就糊
根本原因：CSS 像素和物理像素不等价，background-image 不响应 DPR 变化
background-size 必须配合高倍图使用才有意义；单设它等于给一张低清图“用力拉伸”

必须同时命中两个 media query 才能覆盖主流浏览器

只写 @media (min-resolution: 2dppx) 会漏掉 iOS 9–12 的 Safari；只写 @media (-webkit-min-device-pixel-ratio: 2) 在新版 Chrome/Firefox/Edge 中可能失效。必须用逗号分隔的复合条件：

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

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

下载

.hero {
  background-image: url('bg.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hero {
    background-image: url('bg@2x.jpg');
    background-size: 750px auto; /* 显式声明，不能省 */
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .hero {
    background-image: url('bg@3x.jpg');
    background-size: 1125px auto;
  }
}