图片上文字消失的常见原因不是CSS写错，而是图层顺序或渲染规则不匹配：z-index对非定位元素无效、background-image不支持子元素文字、img标签内不能直接嵌文字；正确做法是用position:relative包裹img和绝对定位的文字div。
图片上文字消失的常见原因
不是 CSS 写错了，而是图层顺序或渲染规则没对上。z-index 无效、position 缺失、图片用了 background-image 却往里塞了 <img alt="html如何让字在图片上显示不出来了" > 标签里的文字——这些都会让字“凭空不见”。
-
background-image上的文字必须是元素自身内容（比如<div>文字</div>），不能靠<img alt="html如何让字在图片上显示不出来了" >标签加子节点 - 用
<img alt="html如何让字在图片上显示不出来了" >时，文字得另起一个定位元素（如<div class="overlay">），且必须设 <code>position: relative/absolute -
z-index只对定位元素生效，没设position的元素，z-index直接被忽略 -
display: inline-block防止外层塌陷，让尺寸贴合图片 - 别依赖
z-index，只要文字在<img alt="html如何让字在图片上显示不出来了" >后面、且同级，它默认就在上面（前提是都定位了）
用 ![html如何让字在图片上显示不出来了]()
+ 定位文字的最小可行写法
这是最不容易出错的方案：图片用 <img alt="html如何让字在图片上显示不出来了" >，文字用独立 <div> 覆盖上去。关键是父容器要“撑开”并建立定位上下文。
<pre class="brush:php;toolbar:false;"><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;">标题文字</div>
</div></pre>
<ul>
<li>外层 <code>div 必须有 position: relative，否则 absolute 文字会相对于整个页面定位
用 background-image 时文字不显示的典型误操作
很多人把 background-image 和 <img alt="html如何让字在图片上显示不出来了" > 混着用，结果文字死活不出来。核心问题是：背景图本身不占文档流，也不接受子元素内容。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 错误写法：
<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导致的像素对齐问题，有时文字刚好落在半像素位置，视觉上“变细→消失”
