background-image 失效主因是路径错误、元素无宽高、引号嵌套冲突或浏览器默认样式干扰；button 需设透明背景、去除边框、显式尺寸，并注意构建工具不解析字符串路径。
直接用 background-image 配合 background-size 和 background-repeat 就能可靠生效，但 90% 的失败不是写法错，而是路径、宽高、引号或浏览器默认样式干扰导致的。
button 设置 background-image 不显示？先查这三件事
常见错误现象：写了 background-image: url("btn.png")，但按钮纯白/纯灰，图片完全不出现。
- 目标
button没有显式width和height（或内容未撑开），导致渲染尺寸为0×0—— 加padding或min-width/min-height立刻可见 - 图片路径错误：相对路径从 HTML 文件位置算起（不是从 CSS 文件），
url("./img/btn.png")中的./指的是 HTML 所在目录 - 引号嵌套冲突：如果用双引号写
style="background-image: url("btn.png")"，外层双引号会在第一个"处截断 —— 改成单引号包裹 URL：style="background-image: url('btn.png')"
IE/旧版 Safari 下 background-image 失效怎么办
部分老浏览器对 button 元素的背景渲染有兼容性问题，尤其当 value 为空或仅含空格时。
- 避免用
<input type="submit" value="">设背景图 —— 它在 IE 下常不渲染背景，改用<button></button>标签 - 显式声明
background-color: transparent，防止某些 Safari 版本用系统默认灰底盖住图片 - 去掉默认边框和轮廓：
border: none; outline: none;，否则可能遮挡图片边缘 - 若仍异常，加
display: inline-block强制触发渲染盒模型
想让背景图自适应按钮大小，background-size 怎么选
background-size 决定图片如何填充按钮区域，不同值行为差异大：
立即学习“前端免费学习笔记（深入）”；
-
cover：等比缩放填满整个按钮，可能裁剪边缘 —— 适合图标类小图、强调视觉饱满感 -
contain：等比缩放至完全可见，留白不可避免 —— 适合文字+图组合、需保留全部细节的场景 -
100% 100%：强制拉伸铺满，会变形 —— 仅用于已知宽高且可接受失真的情况 - 别漏
background-position: center，否则图片默认贴左上角，容易只看到一角
React/Vue 中动态换按钮背景图总 404？路径不是字符串的事
框架里写 style={{ backgroundImage: "url(/assets/btn.png)" }} 是典型陷阱：构建工具（Vite/Webpack）不会解析字符串里的路径，结果就是请求 /assets/btn.png 404。
- 必须提前
import图片：import btnBg from "@/assets/btn.png"，再写backgroundImage: `url(${btnBg})` - 状态切换时，确保所有分支路径都已
import，否则undefined会导致内联样式变成url(undefined) - 如果图片来自 API 返回的 URL，确认该地址可跨域访问，
background-image不支持crossorigin属性，不能像<img>那样绕过 CORS
真正卡住人的从来不是“怎么写”，而是图片格式是否带 alpha、构建后路径是否被重命名、点击热区有没有被 overflow: hidden 裁掉 —— 这三处不动手调一次，光看代码永远看不出问题。
