HTML背景图模糊主因是浏览器渲染、CSS缩放或尺寸不匹配；应优先用contain+center、确保高分辨率图、用image-set适配DPR、禁用fixed、以SVG/CSS渐变替代位图，复杂场景改用img+object-fit。
HTML背景图片模糊，通常不是图片本身质量问题，而是浏览器渲染、CSS缩放或图像尺寸不匹配导致的。直接换更高清图不一定管用，关键得看怎么用。
background-size: cover 时图片被拉伸变形或模糊
这是最常见原因：background-size: cover 会强制等比缩放图片填满容器，若容器宽高比与原图差异大，浏览器必须插值重采样，尤其在高DPI屏幕（如Retina）上更明显。
- 优先用
background-size: contain+background-position: center，保留原始像素比例，留白比模糊好 - 若必须用
cover，确保背景图分辨率至少是目标容器最大尺寸的 2 倍（比如容器最大为 1920×1080，图建议 ≥ 3840×2160） - 避免对
<div>设置transform: scale()或动画中的缩放，这会让背景图二次重采样
响应式页面中 background-image 在不同设备上变糊
媒体查询没跟上设备像素比（window.devicePixelRatio），导致高清屏加载了低分图。
- 用
image-set()提供多倍图（Chrome/Firefox/Edge 支持）：background-image: image-set( url(bg.jpg) 1x, url(bg@2x.jpg) 2x );
- 或用
@media (-webkit-min-device-pixel-ratio: 2)单独覆盖高清屏样式 - 禁用
background-attachment: fixed—— 它在滚动时触发频繁重绘，某些浏览器会降质渲染
使用 SVG 或 CSS 渐变替代位图背景
纯色、几何图案、渐变背景完全没必要用 JPG/PNG，SVG 和 CSS 本身是矢量，缩放零失真。
立即学习“前端免费学习笔记（深入）”；
- 简单渐变直接写：
background: linear-gradient(135deg, #3498db, #8e44ad) - 重复纹理用 SVG data URL（无HTTP请求，可内联）：
background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h4v4H0z' fill='%23000' fill-opacity='0.05'/%3E%3C/svg%3E"); - 图标类背景优先用 SVG 元素或字体图标，而非 PNG 切图
真正难处理的是「既要全屏覆盖、又要适配各种 DPR、还要支持老浏览器」的场景——这时候别硬扛 CSS，改用 <img> + object-fit: cover，配合 srcset，可控性远高于 background-image。
