html如何让字在图片上显示不出来了

图片上文字消失的常见原因不是css写错，而是图层顺序或渲染规则不匹配：z-index对非定位元素无效、background-image不支持子元素文字、img标签内不能直接嵌文字；正确做法是用position:relative包裹img和绝对定位的文字div。

图片上文字消失的常见原因

不是 CSS 写错了，而是图层顺序或渲染规则没对上。z-index 无效、position 缺失、图片用了 background-image 却往里塞了 <img> 标签里的文字——这些都会让字“凭空不见”。

• background-image 上的文字必须是元素自身内容（比如 <div>文字</div>），不能靠 <img> 标签加子节点
• 用 <img> 时，文字得另起一个定位元素（如 <div class="overlay">），且必须设 position: relative/absolute
• z-index 只对定位元素生效，没设 position 的元素，z-index 直接被忽略

用 <img> + 定位文字的最小可行写法

这是最不容易出错的方案：图片用 <img>，文字用独立 <div> 覆盖上去。关键是父容器要“撑开”并建立定位上下文。

<div style="position: relative; display: inline-block;">   <img src="photo.jpg" alt="">   <div style="position: absolute; top: 10px; left: 10px; color: white; text-shadow: 1px 1px 2px black;">&#26631;&#39064;&#25991;&#23383;</div> </div>

• 外层 div 必须有 position: relative，否则 absolute 文字会相对于整个页面定位
• display: inline-block 防止外层塌陷，让尺寸贴合图片
• 别依赖 z-index，只要文字在 <img> 后面、且同级，它默认就在上面（前提是都定位了）

用 background-image 时文字不显示的典型误操作

很多人把 background-image 和 <img> 混着用，结果文字死活不出来。核心问题是：背景图本身不占文档流，也不接受子元素内容。

• 错误写法：<div style="background-image: url(x.jpg);"><span>文字</span></div> → 文字会被渲染，但可能被背景图“盖住”，尤其没设 color 或 text-shadow
• 正确做法：确保文字颜色足够对比，加上 text-shadow 防透明背景干扰
• 如果用了 background-size: cover 或 contain，记得检查文字坐标是否还在可视区域内（top/left 值可能被裁掉）

chrome/firefox 显示不一致的隐藏坑

不是 bug，是渲染细节差异。比如 transform: translateZ(0) 在某些版本 Chrome 会触发新层叠上下文，导致 z-index 行为突变；Firefox 对 opacity: 0.99 的处理也更敏感。

立即学习“前端免费学习笔记（深入）”；

• 避免给图片或文字加无意义的 transform 或 opacity，除非真需要动画
• 调试时临时加 outline: 1px solid red 到文字容器，确认它是否真的渲染出来了，还是被裁剪/透明了
• 移动端要注意 viewport 缩放和 device-pixel-ratio 导致的像素对齐问题，有时文字刚好落在半像素位置，视觉上“变细→消失”

字体大小、颜色、阴影、定位偏移量——这些看着琐碎，但每一样都能单独让文字从图片上“蒸发”。调的时候别一股脑改一堆，盯住一个变量试。