背景图片模糊的根本原因是源图分辨率不足，应使用≥2×目标宽度的高清图，配合background-size: cover和no-repeat，并通过image-set()或媒体查询提供多倍图，优先选用webp格式并避免过度压缩。
背景图片模糊是因为用了低分辨率图当 CSS background-image
浏览器不会“修复”模糊的图片——它只是原样渲染你给的文件。如果你用一张 800×600 的图撑满 1920×1080 的屏幕，CSS 再怎么写 background-size: cover，结果都是拉伸失真。核心问题不在 CSS，而在源头：图本身不够大、不够清晰。
用高分辨率图 + 正确的 background-size 和 background-repeat
高清背景的前提是图源足够大（建议 ≥2× 目标容器宽度），再配合合理 CSS 控制渲染方式：
-
background-size: cover：等比缩放并裁剪，确保填满；适合全屏 banner，但可能切掉边缘内容 -
background-size: contain：等比缩放并完整显示，留白常见，适合 logo 或图标类背景 -
background-repeat: no-repeat必须加，避免小图平铺成马赛克 - 慎用
background-size: 100% 100%—— 强制拉伸，必糊
适配不同设备：用 @media 或 image-set() 提供多倍图
单张大图会拖慢手机加载，更优解是按设备像素比（DPR）提供对应资源：
body {
background-image: image-set(
url(bg.jpg) 1x,
url(bg@2x.jpg) 2x,
url(bg@3x.jpg) 3x
);
background-size: cover;
background-repeat: no-repeat;
}
或用媒体查询降级：
立即学习“前端免费学习笔记（深入）”；
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
background-image: url(bg@2x.jpg);
}
}
注意：image-set() 在 Safari 和 Chrome 支持良好，Firefox 需要 prefers-reduced-motion 等兼容处理，上线前务必实测。
别忽略图片格式和压缩方式
即使尺寸够大，JPEG 过度压缩也会产生色块和模糊感。推荐做法：
- 优先用
.webp格式（支持透明、高压缩率、浏览器兼容性已覆盖主流版本） - 导出时关闭“质量优先”类自动压缩，手动控制：WebP 75–85，JPEG 85–92
- 避免用 PS “存储为 Web 所用格式”，改用现代工具如
squoosh.app或sharpCLI 压缩 - 检查图片是否被 CMS 或 CDN 自动加了质量参数，比如
?q=60这类 URL 后缀要删掉或调高
最常被忽略的一点：很多所谓“高清图”其实是从网页右键另存为得来的——那张图早被服务器压缩过一遍，原始分辨率已经丢失。真正可靠的来源只有设计稿源文件或图库平台提供的原图下载选项。
