按钮背景图仍平铺是因为路径错误、按钮无宽高、被全局样式覆盖或简写属性顺序错误；必须显式设no-repeat，配合background-position、background-size及明确尺寸才能生效。
按钮背景图不重复，必须显式写 background-repeat: no-repeat，否则默认平铺；但光写这行没用——路径错、按钮没尺寸、被其他样式覆盖，都会让“不重复”失效。
为什么按钮上写了 no-repeat 还是平铺？
浏览器对 background-repeat 的默认值就是 repeat，哪怕你只设了 background-image，没提 repeat，它照样平铺。更常见的是这些“隐形失败”：
-
background-image路径 404：比如按钮 CSS 在css/main.css里，却写了url("img/bg.png")，实际应为url("../img/bg.png") - 按钮本身没宽高：
<button>点我</button>默认是内容撑开，若文字极短或加了padding: 0，高度可能塌陷到几像素，图根本展不开 - 被全局重置样式覆盖：比如项目用了 Normalize.css 或自定义的
* { background-repeat: repeat !important; }，直接把你的no-repeat给压没了 - 简写属性顺序错了：写成
background: url("a.png") center no-repeat;是无效的——no-repeat必须紧跟在url()后面，正确是background: url("a.png") no-repeat center;
background-position 不配 no-repeat 就等于白设
只写 no-repeat，图片会死死贴在按钮左上角。按钮稍宽一点，你就看到图孤零零在角落，右边一大片空白（或底色）。这时候必须靠 background-position 控制落点：
- 居中显示：
background-position: center;或background-position: 50% 50%; - 右下角固定：
background-position: right bottom; - 向右偏移 10px、向下 5px：
background-position: 10px 5px; - 注意：
background-position对repeat类型无效，但它对no-repeat是刚需，不是可选项
按钮尺寸和 background-size 怎么配合才不拉伸变形
按钮有背景图又不重复，图太小会显得空，太大又容易失真。关键不是“填满”，而是“适配”：
- 想完整显示且居中：
background-size: contain;—— 图按比例缩放到刚好全部可见，可能留白 - 想填满按钮且裁剪多余部分：
background-size: cover;—— 常用于纹理或氛围图 - 避免用
100% 100%：background-size: 100% 100%;会强行拉伸，图一准变形 - 按钮必须有明确尺寸：至少设
min-height和padding，比如min-height: 36px; padding: 8px 16px;，否则cover或contain都没意义
完整可用的按钮背景图示例
下面这段代码能直接粘贴进 <style></style> 或外部 CSS，确保图只出现一次、居中、不拉伸、在任意尺寸按钮上都稳定：
button.icon-btn {
background-image: url("../images/icon-check.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
min-height: 36px;
padding: 8px 16px;
border: none;
}
其中 background-origin: content-box 确保缩放和定位都以内容区为基准，避免内边距干扰位置；如果按钮有圆角，记得加 background-clip: padding-box 防止图溢出圆角边缘——这点常被忽略，尤其用 cover 时边缘容易露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
