最稳妥方案是用包裹，它天然支持内嵌元素、可靠显示图片并保留表单行为；需重置默认边框背景、设置alt或aria-label、添加:focus/:active反馈以保障可访问性。
用 <button></button> 包裹 <img> 最稳妥
直接替换 <input type="button"> 的默认样式风险高，浏览器对它的渲染控制很死，连背景图都常被忽略。改用 <button></button> 标签，它天然支持内嵌元素，能可靠显示图片且保留表单提交行为。
- 必须加
type="button"（或type="submit"），否则在某些表单里会意外触发提交 -
<img>建议设alt=""（纯装饰图）或有意义的描述（功能型按钮），避免屏幕阅读器误读 - 记得重置
button默认边框和背景：用 CSS 写border: none; background: none;，否则旧版 IE 可能残留灰边
input[type="image"] 能用但有硬伤
这是 HTML 原生支持图片按钮的方式，点击后会以坐标形式提交 x 和 y 参数（如 submit.x=123&submit.y=45），多数后端根本不需要这个坐标数据。
- 如果只是想换外观，它反而让后端多处理无用字段
- 无法设置
alt文本（只有title），可访问性差 - 点击区域严格等于图片尺寸，没法像
button那样靠 padding 扩大热区
CSS 背景图方案：适合纯视觉替换
如果必须保留 <input type="button"> 结构（比如老系统不能改 HTML），就用 CSS 覆盖默认样式。
- 关键要加
border: none; background: url("xxx.png") no-repeat center; width/height显式设定尺寸 - 务必设
cursor: pointer，否则鼠标悬停时没手型提示 - 注意 Safari 对
input[type="button"]的背景图渲染偶尔抽风，建议加-webkit-appearance: none;
别漏掉可访问性和交互反馈
图片按钮容易变成“盲点”——键盘用户按 Tab 进不去，鼠标用户点下去没按下态。这些不是锦上添花，是实际可用的前提。
- 所有图片按钮必须有
aria-label或关联的<label></label>，否则 VoiceOver、NVDA 读不出来 - 用
:focus和:active伪类给键盘聚焦和鼠标按下状态加视觉反馈，哪怕只是加个outline - 如果图片是 SVG，确保它内联或设置了
role="img"，不然部分读屏器当普通图形跳过
真正麻烦的从来不是怎么放一张图，而是这张图在键盘、屏幕阅读器、触屏、高对比度模式下是否还“存在”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
