用background设置按钮背景图需同时配置width/height、background-size、background-position和background-repeat，否则易出现不显示、文字遮挡、缩放失真等问题；推荐简写形式background: url("x") no-repeat center / contain。
直接用 background 给 button 设背景图最简单，但容易出错——不是图片不显示，就是文字被盖住、点击区域变小、缩放失真，或者在高分屏上模糊。
background-image 必须配合尺寸和定位才可用
只写 background-image: url("icon.png") 几乎一定失败：按钮默认没有宽高，图片无处渲染；即使有宽高，图片也可能被裁切、重复平铺或偏移出界。
- 必须显式设置
width和height（或用padding+line-height撑开） - 加上
background-size: cover或contain控制缩放行为 - 加上
background-position: center center避免图标偏左/偏上 - 加上
background-repeat: no-repeat防止横向/纵向重复 - 如果按钮文字要保留，别忘了
color和text-shadow（深色图上白字可能看不清）
background 一次性写全比拆开更稳妥
用简写 background 而非单独写 background-image，能避免浏览器重置其他背景属性（比如意外继承父级的 background-color）。
- 推荐写法：
background: url("btn-bg.png") no-repeat center / contain; - 斜杠前是位置，斜杠后是尺寸，顺序不能反
- 如果要叠加渐变遮罩，写成：
background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("btn-bg.png"); - 注意：多背景时，
background-size只对最后一个背景生效，多个尺寸需用逗号分隔
button 上 background 图标 vs icon 属性的根本区别
button 元素本身不支持 icon 属性，所谓“图标按钮”实际只有两种实现路径：一种是用 background 当装饰层，另一种是用 <img> 或伪元素。前者更轻量，后者更可控。
-
background是纯视觉层，无法响应鼠标 hover/focus 状态切换不同图标（除非用 CSS 类切换整个background） - 文字和背景图共用同一块渲染区域，
padding会影响图文相对位置，text-align不影响背景图 - SVG 路径作为
background-image时，记得加background-size: 100% 100%，否则默认按原始尺寸渲染，可能极小 - 如果需要状态切换（如按下变暗）、无障碍支持（
aria-label）、或图标与文字间距精确控制，应改用<button><svg></svg>文本</button>结构
移动端和高DPI屏的适配陷阱
本地图片路径在 retina 屏上会发虚，background-size: cover 在小按钮上可能拉伸变形，这些都不是 bug，而是 CSS 渲染机制决定的。
- 优先用 SVG 代替 PNG/JPG：
background: url("icon.svg") no-repeat center / 100% 100%; - 需要多倍图时，不要手动切 @2x，改用
image-set()（兼容性有限）或媒体查询： @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn { background-image: url("icon@2x.png"); } }- 按钮宽度小于 44px 时，iOS Safari 会限制最小点击区域，必须用
min-width: 44px或padding补足，否则触控不灵敏
真正难的不是让图标显示出来，而是让它在各种尺寸、状态、设备下都保持可点、可见、可读。background 图标是快捷方案，但一旦涉及交互反馈或设计系统统一管理，就得考虑抽离为组件或换用语义化结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
