background-size: cover 导致按钮背景图模糊，是因强制等比缩放+裁剪引发插值重采样，使文字锯齿、渐变断层；应优先用 SVG 或高倍位图配 100% 100% 或 contain，并重置 padding 和 background-origin。
background-size: cover 在缩放时为什么让按钮背景图变糊
不是图片本身质量差，而是 background-size: cover 强制等比缩放+裁剪，当浏览器把一张 200×200 的图拉伸到 187×187（比如缩放 110% 后按钮实际尺寸），就得靠双线性插值重采样——像素被“猜”出来，边缘发虚、文字锯齿、渐变断层。Retina 屏上尤其明显。
- 别用
cover处理含文字、图标或精细线条的按钮背景；它适合纯装饰性大图，比如 banner 底图 - 如果必须用
cover，确保原始图宽高比和按钮容器一致（例如按钮固定为width: 48px; height: 48px;，图也导出为 48×48） - 禁用
image-rendering: -webkit-optimize-contrast—— 它会让 JPG 块效应更刺眼，不是锐化，是暴露压缩缺陷
button 背景图该用 contain 还是 100% 100%
background-size: contain 和 background-size: 100% 100% 行为完全不同，选错就失真或留白：
-
contain：保持原图比例完整显示，适合图标类小图（如 16×16 SVG 或 PNG），但按钮尺寸不固定时可能上下/左右留白 -
100% 100%：强制拉伸填满，适合已知固定尺寸的按钮（如width: 32px; height: 32px;），但位图会变形，SVG 则无损 - 真正稳妥的做法是：给按钮设明确宽高 +
background-size: 100% 100%+ 用 SVG 或高倍 PNG（@2x/@3x）作源图
缩放时按钮背景图错位或只显示一半
这不是 bug，是 background-origin 默认从 padding-box 开始画图，而 button 默认有 padding。缩放后 padding 值不变，但内容区相对变小，图就被“切”掉一部分。
- 重置 button 样式：
padding: 0; border: none; background: transparent; - 显式设置
background-origin: content-box;，让背景图对齐内容区而非内边距区 - 配合
background-position: center;和background-repeat: no-repeat;，避免平铺或偏移 - 如果按钮文字和图标共存，用
display: flex; align-items: center; gap: 4px;布局，别依赖 background-position 微调
响应式缩放下如何让背景图始终清晰
核心思路不是“修复模糊”，而是“避开重采样”。浏览器渲染背景图时，没有 srcset，没法按 DPR 加载不同分辨率图，所以得靠策略绕过缩放陷阱：
立即学习“前端免费学习笔记（深入）”；
- 优先用 SVG 作按钮背景：
background-image: url("icon.svg");，再配background-size: contain;，缩放无损 - 若必须用位图，提供 @2x 图并手动控制尺寸：
background-image: url("btn-bg@2x.png"); background-size: 50% 50%;（假设按钮是 32×32，图是 64×64） - 在媒体查询里切换图源：
@media (-webkit-min-device-pixel-ratio: 2) { .btn { background-image: url("btn-bg@2x.avif"); } } - 禁用
filter: blur()或contrast()临时补救——它们不恢复细节，只改变观感，还增加渲染开销
最易被忽略的一点：button 默认 padding 不为零，且各浏览器默认值不一致。不重置它，background-origin 和 background-position 再准也没用。
