css background-image 不显示主因是路径错误（相对css文件而非html）、元素无宽高、引号嵌套冲突或浏览器默认样式干扰，需逐项排查。
background-image 能用，但 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 + 变量引用，不能混用字符串字面量
- Vite 用户注意：
@/别名在 CSS 里有效，但在 JS 字符串中无效 —— JS 层必须靠import解析
最易被忽略的是：button 默认没有宽高，且构建工具对 JS 字符串中的路径完全无感知。这两点踩中一个，就看不到图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
