图片上文字消失的常见原因不是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 src="photo.jpg" alt="">后面、且同级，它默认就在上面（前提是都定位了）
用 ![html如何让字在图片上显示不出来了]()
+ 定位文字的最小可行写法
这是最不容易出错的方案：图片用 <img alt="html如何让字在图片上显示不出来了" >，文字用独立 <div> 覆盖上去。关键是父容器要“撑开”并建立定位上下文。
<pre class="brush:php;toolbar:false;"><div style="position: relative; display: inline-block;">
@@##@@
<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如何让字在图片上显示不出来了" > 混着用，结果文字死活不出来。核心问题是：背景图本身不占文档流，也不接受子元素内容。
SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。
- 错误写法：
<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导致的像素对齐问题，有时文字刚好落在半像素位置，视觉上“变细→消失”
