按钮背景图变形主因是未设background-size或误用100% 100%，应改用cover/contain并配background-position和no-repeat；cover等比填满但需调position防裁关键内容，contain完整显示但需设宽高防留白。
按钮背景图拉伸变形，根本原因不是图片本身，而是没设 background-size 或误用了 100% 100% —— 直接改用 cover 或 contain，再配 background-position 和 background-repeat: no-repeat，90% 的问题当场消失。
为什么 background-size: 100% 100% 会让按钮背景图变形
这个值强制把图片宽高都拉满按钮容器，完全无视原图比例。一张 4:3 的图塞进 16:9 的按钮里，必然压扁或拉长。
- 只在装饰性纯色块、无细节的渐变图或矢量图案上可临时用
- 人像、图标、带文字的图一用就糊，尤其是小尺寸按钮（如 48×48px）
- 它和
background-size: fill效果一致，但后者不被所有浏览器支持，别混用
background-size: cover 在按钮中怎么用才不切掉关键内容
这是按钮背景最常用的值：等比缩放+填满+允许裁剪。但默认 center 居中裁剪，常把图标顶部或按钮文字区域切掉。
- 加
background-position: center top优先保留上半部分，适合带文字标签的按钮 - 图标类按钮（如微信、下载图标）用
background-position: 50% 50%或直接center更稳 - 若按钮高度远大于宽度（如竖排菜单项），改用
background-position: left center防左边缘被裁 - 务必同步写
background-repeat: no-repeat，否则小图会被重复平铺，cover失效
background-size: contain 什么时候必须选它
当按钮背景是功能性图标（如“设置”齿轮、“返回”箭头）或需完整识别的图形时，任何裁剪都会影响语义传达。
- 它让整张图按比例缩放后完整落在按钮内，但会留白 —— 所以按钮必须有明确宽高（不能靠内容撑开）
- 留白区域颜色要和按钮背景色一致，否则出现“白边”，建议加
background-color显式声明 - 小图在大按钮里会显得太小？那就配合
padding缩小按钮实际点击区，或换更高分辨率图 - 慎用于带阴影/描边的图标：
contain缩放后，描边可能过细或模糊，优先用 SVG
移动端按钮背景图适配容易忽略的三件事
桌面看着好好的按钮，到 iPhone 上点不动、图错位、或者突然模糊，往往不是代码写错，而是漏了这些。
-
background-attachment: fixed在 iOS Safari 上基本失效，且可能触发重绘卡顿，按钮背景一律用scroll（默认值） - 高 DPI 屏幕（如 Retina）下，
contain缩放后的图可能发虚，给background-image加image-set()或媒体查询配min-resolution: 2dppx - 按钮宽高用
rem或%时，background-size: cover的裁剪基准会随父容器浮动 —— 改用固定像素（如44px）或clamp()锁死最小尺寸
真正难的不是选 cover 还是 contain，而是同一张图在不同尺寸按钮、不同设备像素比、不同文字密度下，background-position 的偏移值得重新算一遍——没有万能值，只有反复真机预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
