background-size: cover在旧版WebKit中模糊的根本原因是渲染引擎插值算法粗糙，尤其图片尺寸远小于容器时触发低质量拉伸；需提高源图物理分辨率、避免transform缩放、统一单位并用image-set或媒体查询适配DPR。
background-size: cover 在旧版内核中模糊，根本不是 CSS 写错了
旧版 WebKit（如 iOS Safari 12 及更早）、部分 Android WebView 对 background-size: cover 的缩放插值算法较粗糙，尤其当图片原始尺寸远小于容器渲染尺寸时，浏览器会用低质量双线性插值拉伸，导致边缘发虚、文字糊成一片。这不是你漏写了 background-position，也不是图没加 no-repeat，而是底层渲染引擎能力限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要指望靠
image-rendering: -webkit-optimize-contrast拯救——它只对小图有效，对 cover 场景基本无感 - 检查图片原始分辨率是否 ≥ 容器在该设备上的最大可能渲染尺寸（例如 iPhone 14 Pro Max 竖屏下 banner 区域可能达 1290px × 2796px，图至少要 2580px × 5592px 才能避免二次插值）
- 若必须兼容老内核，改用
background-size: contain+background-position: center，宁可留白也不糊 - 禁用任何对背景容器的
transform: scale()或动画缩放，这会让模糊雪上加霜
为什么调大图片原始尺寸值比调 CSS 更管用
很多人试图用 background-size: 200% 200% 或媒体查询里硬设 100vw 100vh 来“撑大”，结果更糊——因为浏览器仍以原图像素为基准做插值。真正起效的是提高源文件物理像素数。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设计稿标称宽度为 750px（@1x），那么实际切图至少提供
bg@2x.jpg（1500px 宽）和bg@3x.jpg（2250px 宽）两个版本 - 全屏背景图目标显示区域是 1920px × 1080px，原始图建议 ≥
3840px × 2160px（即 4K 尺寸），而非简单 PS 放大一张 1920px 图 - 用
image-set()显式声明多倍图：background-image: image-set("bg.jpg" 1x, "bg@2x.jpg" 2x, "bg@3x.jpg" 3x); - 降级方案用媒体查询判断 DPR：
@media (-webkit-min-device-pixel-ratio: 2) { .hero { background-image: url("bg@2x.jpg"); } }
旧版内核下 cover 失效的隐藏条件：容器高度没“钉死”
iOS Safari 12–13 中，如果父容器高度依赖内容撑开（height: auto），或用了 100vh 但页面有地址栏/键盘弹出，background-size: cover 可能初始不计算、滚动后才重绘，造成闪动+模糊。这不是属性失效，而是容器尺寸在 JS 渲染周期外抖动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给根容器（如
html,body）加height: 100%，再给目标 div 加min-height: 100vh，比单写height: 100vh更稳 - 避免在 flex 容器里仅靠子项内容撑高，显式写
min-height: 100vh或flex: 1 - 在 iOS 上监听
resize事件，检测document.documentElement.clientHeight变化后再触发一次background-size重设（仅限必须 cover 的场景） - 慎用
background-attachment: fixed——老内核下不仅模糊，还常伴随滚动卡顿
cover 模糊最易被忽略的点：DPR 和 width 单位混用
当用 background-size: 750px auto 配合 @2x 图时，旧内核可能把 750px 当作 CSS 像素，而实际设备像素是 1500px，导致浏览器误判缩放比例，插值失真。这不是图的问题，是单位语义错配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
%或vw/vh，避免混用固定像素值和 DPR 切图 - 若必须用像素值，确保所有 media query 中的
background-size与对应 DPR 图的物理尺寸严格匹配（如 @2x 图配1500px auto） - 测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Show paint rectangles”，看模糊区域是否在重绘热点内
- 真机调试比模拟器可靠得多——iOS 模拟器不会复现真实 DPR 插值行为
