应优先用替代background-image实现全屏背景，因其支持srcset/sizes精准适配多DPR，避免CSS渲染模糊；纯色渐变用CSS，纹理用SVG内联，图标用元素。
背景图模糊不是图片本身烂，而是浏览器在缩放、重采样或渲染时“做错了选择”。直接换更高清图往往没用，关键得管住 CSS 和加载逻辑。
background-size: cover 导致拉伸模糊怎么破
这是最常见也最容易被误判的场景。background-size: cover 会强制等比缩放填满容器，一旦容器宽高比和原图不一致，浏览器就必须插值重绘——尤其在 Retina 或 2K/4K 屏上，模糊感非常明显。
- 优先改用
background-size: contain+background-position: center，牺牲一点留白，换来原始像素不被破坏 - 非要用
cover？那背景图物理分辨率至少要是目标容器最大尺寸的 2 倍（比如容器最大 1920×1080，图建议 ≥ 3840×2160） - 别给父容器加
transform: scale()或动画缩放，这会让背景图二次重采样，糊上加糊
高清屏（DPR > 1）下背景图变糊怎么办
设备像素比（window.devicePixelRatio）是核心变量。很多页面在 iPhone 或 MacBook 上模糊，就是因为只提供了一套 1x 图，却被按 2x 或 3x 物理像素渲染。
- 用
image-set()显式声明多倍图：background-image: image-set(url(bg.jpg) 1x, url(bg@2x.jpg) 2x); - 兼容性要求高？退而求其次，用媒体查询：
@media (-webkit-min-device-pixel-ratio: 2)单独覆盖高清屏样式 - 禁用
background-attachment: fixed——它在滚动时频繁触发重绘，部分浏览器会主动降质渲染
该不该用 background-image 做全屏背景
当需求是「全屏覆盖 + 多 DPR 适配 + 老浏览器兜底」，background-image 就是自找麻烦。它的可控性远不如
- 换成
object-fit: cover，配合position: absolute覆盖容器 -
srcset提供多分辨率资源，sizes告诉浏览器不同视口下的显示宽度，浏览器自动选最合适的图 - 这样既绕开
background-image的 DPR 适配黑盒，又避免了image-set在 Safari 旧版中的兼容问题
纯色/渐变/几何纹理背景还在用 PNG 吗
用位图做纯色、渐变或规则纹理，等于主动放弃清晰度和性能——SVG 和 CSS 本身是矢量，缩放零失真，还省 HTTP 请求。
- 简单渐变直接写：
background: linear-gradient(135deg, #3498db, #8e44ad) - 重复纹理用 SVG data URL 内联：
background-image: url("data:image/svg+xml,%3Csvg...%3E"); - 图标类背景一律用
元素或字体图标，别切 PNG
真正难处理的不是单点模糊，而是既要响应式覆盖、又要跨设备 DPI 适配、还要支持 IE11 这类老环境——这时候别硬刚 CSS，改用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
