用 CSS 的 position + transform 实现图片上叠加文字
直接在 <img alt="html怎么在图片上添加文字_html图片文字添加方法【教程】" > 标签里加文字是不可能的，HTML 图片是替换元素，不接受子内容。必须用容器包裹，再靠定位把文字“摆”上去。
常见错误是只给文字加 position: absolute，但忘了父容器设 position: relative —— 这会导致文字相对于整个页面或某个祖先定位，飘到屏幕角落去。
- 父容器（比如
<div>）必须设 <code>position: relative - 文字元素（
<span></span>或<p></p>）设position: absolute，再用top/left或transform微调位置 - 推荐用
transform: translate(-50%, -50%)配合top: 50%+left: 50%居中，比纯百分比更稳（避免父容器 padding 干扰）
<div style="position: relative; display: inline-block;"> @@##@@ <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: white; font-weight: bold;">这里是文字</p> </div>
用 background-image 替代 
标签来简化结构
如果文字和图片是固定搭配、不需单独访问图片（比如无 SEO 或无障碍需求），直接把图设为容器背景更干净——不用处理 <img alt="html怎么在图片上添加文字_html图片文字添加方法【教程】" > 的宽高塌陷、加载失败占位等问题。
注意：背景图无法被右键保存、不能被屏幕阅读器识别，也不支持 srcset 响应式切换。
v3.0修正版更新：新增加的功能：1、网店logo在线上传。2、添加图片上传预览功能。3、增加ICP备案字段，在线添加。4、添加管理员管理功能。5、添加送货详细设置功能。6、增加客户端验证功能。7、增加5种样式。修正的地方：1、订单不能删除。2、产品图片不能删除。3、管理员不能修改密码。4、小数显示不正常，比如0.68显示为.685、退出不方便。6、前台热门商品文字显示不换行。7、商品详细介绍页面
立即学习“前端免费学习笔记（深入）”；
- 用
background-image: url(...)+background-size: cover或contain控制显示 - 容器需显式设置
width和height，否则高度为 0，文字看不见 - 文字直接写在容器内，无需绝对定位也能用 flex 居中
<div style="width: 300px; height: 200px; background-image: url(photo.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;"> <span style="color: white; text-shadow: 1px 1px 2px black;">叠加文字</span> </div>
响应式下文字位置错乱？别硬写 px，优先用视口单位或 calc()
用固定 top: 20px 在手机上可能压住关键区域，在大屏上又太靠上。像素值在不同设备上完全不是一回事。
真正稳定的方案是结合视口单位和容器自身比例，比如让文字始终在图片底部 10% 处，而不是离顶部 20px。
- 用
bottom: 5%+left: 5%比top: 100px更适应缩放 - 需要精确偏移时，用
calc(50% + 1rem)组合相对与绝对单位 - 避免在
@media里重复写整套定位逻辑，优先用相对单位一次写对
文字看不清？别只调 color，text-shadow 才是关键
图片明暗不一，纯白色文字在亮区消失、黑色文字在暗区隐形——只改 color 是治标不治本。
text-shadow 是最轻量、兼容性最好的解决方案（IE9+ 支持），一行 CSS 就能保底可读。
- 单层阴影：
text-shadow: 2px 2px 4px rgba(0,0,0,0.6) - 双层增强：
text-shadow: 0 0 2px #000, 0 0 4px #000（适合粗字体） - 慎用
background-color半透明遮罩层——会改变图片观感，且在浅色图上仍可能失效
top 值，却没检查父容器有没有 position: relative。
