使用高分辨率图片并合理设置background-size可解决背景图模糊问题。建议选择1920px以上宽度的图片用于全屏背景，移动端通过媒体查询加载适配尺寸；优先使用background-size: cover实现等比缩放填满容器，避免使用100% 100%拉伸导致失真；结合background-position: center确保主体居中，background-repeat: no-repeat防止重复叠加，必要时添加image-rendering: -webkit-optimize-contrast提升小图对比度，综合优化可使背景图在各类屏幕清晰显示。
背景图模糊通常是因为图片被拉伸或缩放不当导致的，尤其在高分辨率屏幕上更明显。单纯使用 background-size 可以有效优化显示效果，让背景图清晰呈现。
检查背景图原始分辨率
确保使用的背景图本身分辨率足够高，特别是要适配大屏或 Retina 显示器。低像素图片放大后必然模糊。
- 建议使用至少 1920px 宽度以上的图片作为全屏背景
- 对于移动端，可准备不同尺寸的图通过媒体查询加载
合理设置 background-size
通过调整 background-size 控制图片的缩放方式，避免失真。
- background-size: cover; —— 图片等比缩放填满容器，可能裁剪边缘，适合全屏背景
- background-size: contain; —— 完整显示图片，可能留白，适合图标类背景
- background-size: 100% 100%; —— 拉伸填充，易模糊，不推荐用于非矢量图
配合其他属性提升清晰度
仅靠 background-size 不够时，可结合以下 CSS 属性进一步优化：
立即学习“前端免费学习笔记（深入）”；
- image-rendering: -webkit-optimize-contrast; —— 提升小图拉伸时的清晰度
- background-position: center; —— 确保关键内容居中显示，避免重要部分被裁剪
- background-repeat: no-repeat; —— 防止重复导致模糊叠加
