cover使图片等比缩放并完全覆盖按钮区域，可能裁剪但不变形；contain使图片等比缩放并完整显示在按钮内，可能留白但保留全部细节；二者均不拉伸变形，而100% 100%或auto会导致变形或裁切。
background-size: cover 和 contain 的行为差异必须分清
拉伸变形的根源，往往是你用了 background-size: 100% 100% 或根本没设 background-size（默认 auto，等同于只铺满宽度、高度按比例缩放，但容器尺寸不匹配时就会裁切或留白）。真正可控且不变形的两个值是 cover 和 contain：
-
cover：图片等比缩放，完全覆盖按钮区域——可能被裁剪，但绝不变形；适合强调视觉填充的按钮，比如带文字的 banner 式操作按钮 -
contain：图片等比缩放，完整显示在按钮内——可能上下或左右留白，但所有细节都保留；适合图标类小图、需要精确识别内容的场景（如“播放”“设置”图标）
别用 fill，它就是拉伸变形的代名词，除非你明确要压扁/拉长。
button 元素用 background-size 时必须控制宽高和重复行为
按钮本身是替换元素，但不像 <img> 那样自带语义尺寸，所以仅靠 background-size 不够，必须配合显式尺寸和重复控制：
- 给
<button></button>设置固定width和height（比如32px），否则background-size: cover在自适应宽高的按钮里行为不可控 - 务必加
background-repeat: no-repeat，否则小图会平铺重复，尤其在宽按钮上明显失真 - 推荐用简写
background属性一次性声明，避免遗漏：background: url("icon.png") no-repeat center / 32px 32px;（斜杠后即background-size）
移动端或响应式按钮里 cover 容易裁掉关键内容
选了 cover 后，图片被裁剪的位置默认是 center，但按钮图标的关键部分（比如箭头尖、齿轮齿）常不在正中。这时必须显式设置 background-position：
- 常见组合：
background-position: center top（保顶部细节）、center bottom（保底部锚点）、left center（保左侧图标主体） - 百分比值更灵活：
background-position: 20% 30%表示“图片横向 20% 处对齐按钮左边缘，纵向 30% 处对齐按钮上边缘”，不是简单偏移 - 在媒体查询里重设：
@media (max-width: 480px) { button { background-size: contain; background-position: center; } }
老浏览器兼容和 Safari 的 fixed 背景陷阱
如果项目还需支持 IE11 或旧版 Safari，要注意：
-
background-size: cover和contain在 IE9+ 支持良好，但需加前缀：-webkit-background-size: cover; - 千万别在按钮上用
background-attachment: fixed—— Safari 移动端对它支持差，滚动时容易闪动或局部拉伸，且和按钮交互（hover/focus）冲突 - 若按钮尺寸动态变化（比如文字长度影响宽度），
background-size: 100% 100%会立刻变形，此时应改用contain+background-position: center，接受留白换稳定
真正难的是判断该用 cover 还是 contain：前者要视觉满屏，后者要信息完整——这个取舍没法自动，得看按钮承载的是装饰还是功能标识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
