应根据需求选择 background-size 属性：contain 保持完整缩放，cover 全覆盖裁剪，100% 100% 强制拉伸；配合 padding、background-origin 和媒体查询可实现适配与响应式优化。
如果您为HTML5按钮设置了背景图片，但在不同设备或分辨率下出现拉伸、裁剪或显示不全的问题，则可能是由于背景图未适配容器尺寸。以下是实现背景图在按钮中正确显示的多种技巧：
一、使用 background-size: contain
该属性确保背景图片完整显示在按钮区域内，按比例缩放，不裁剪也不变形，适合图标类小图或需保留全部细节的场景。
1、在按钮的CSS样式中添加 background-image 属性，指定图片路径。
2、设置 background-size: contain;
立即学习“前端免费学习笔记（深入）”；
3、添加 background-repeat: no-repeat;
4、设置 background-position: center; 使图片居中对齐。
二、使用 background-size: cover
该属性使背景图片完全覆盖按钮区域，按比例缩放并裁剪超出部分，适合强调视觉填充效果的按钮背景。
1、为按钮定义 background-image 并指定有效图片URL。
2、设置 background-size: cover;
3、设置 background-repeat: no-repeat;
4、使用 background-position: center; 确保关键内容位于可视中心区域。
三、使用 background-size: 100% 100%
该写法强制拉伸背景图以完全填满按钮宽高，适用于已知固定尺寸且可接受形变的装饰性图片。
1、确认按钮具有明确的 width 和 height 值（如 px 或 rem 单位）。
2、设置 background-size: 100% 100%;
3、添加 background-repeat: no-repeat;
4、必要时配合 background-position: top left; 控制起始对齐点。
四、结合 padding 与 background-origin
当按钮内含文字且需避免文字遮挡背景图关键区域时，可通过调整背景绘制起点配合内边距实现安全留白。
1、为按钮设置合适的 padding 值（如 padding: 12px 24px;）。
2、设置 background-origin: content-box;
3、设置 background-size: contain;
4、设置 background-position: center;
五、响应式 media query + 多图源切换
针对不同屏幕宽度加载不同分辨率的背景图，兼顾清晰度与加载性能。
1、准备三套尺寸的背景图：btn-bg-sm.png（320px宽）、btn-bg-md.png（768px宽）、btn-bg-lg.png（1200px宽）。
2、在CSS中使用媒体查询分别定义 background-image：
3、@media (max-width: 767px) { .btn { background-image: url('btn-bg-sm.png'); } }
4、@media (min-width: 768px) and (max-width: 1199px) { .btn { background-image: url('btn-bg-md.png'); } }
5、@media (min-width: 1200px) { .btn { background-image: url('btn-bg-lg.png'); } }
