html图片显示字

使用背景图片+容器实现文字覆盖

使用<figcaption>

步骤	代码示例	说明
包裹图片和文字	html<br>&lt;figure&gt;<br>&nbsp;&lt;img src="image.jpg" alt="示例图片"&gt;<br>&nbsp;&lt;figcaption&gt;描述文字&lt;/figcaption&gt;<br>&lt;/figure&gt;	使用语义化标签组合图片和说明
CSS样式调整	css<br>figure { position: relative; width: 300px; }<br>img { width: 100%; }<br>figcaption {<br&nbsp;&nbsp;position: absolute;<br&nbsp;&nbsp;bottom: 10px;<br&nbsp;&nbsp;left: 0;<br&nbsp;&nbsp;width: 100%;<br&nbsp;&nbsp;text-align: center;<br&nbsp;&nbsp;background: rgba(0,0,0,0.5);<br&nbsp;&nbsp;color: white;<br&nbsp;&nbsp;padding: 5px 0;<br>}	绝对定位文字层，添加半透明背景

使用<picture>+文字叠加

步骤	代码示例	说明
基础结构	html<br>&lt;div class="text-over-image"&gt;<br&nbsp;&lt;picture&gt;<br&nbsp;&nbsp;&lt;source srcset="image@2x.jpg" media="(min-width: 600px)"&gt;<br&nbsp;&nbsp;&lt;img src="image.jpg" alt="响应式图片"&gt;<br&nbsp;&lt;/picture&gt;<br&nbsp;&lt;div class="overlay-text"&gt;顶部文字&lt;/div&gt;<br>&lt;/div&gt;	支持响应式图片和文字层
关键样式	css<br>.text-over-image { position: relative; }<br>.overlay-text {<br&nbsp;&nbsp;position: absolute;<br&nbsp;&nbsp;top: 0;<br&nbsp;&nbsp;left: 0;<br&nbsp;&nbsp;width: 100%;<br&nbsp;&nbsp;height: 100%;<br&nbsp;&nbsp;display: flex;<br&nbsp;&nbsp;align-items: center;<br&nbsp;&nbsp;justify-content: center;<br&nbsp;&nbsp;background: rgba(0,0,0,0.3);<br&nbsp;&nbsp;color: #fff;<br&nbsp;&nbsp;pointer-events: none;<br>}	全屏覆盖层+Flex布局居中

---

常见问题与解答

Q1：如何让文字始终居中显示？
A：推荐使用Flex布局，通过display: flex配合align-items: center和justify-content: center实现水平和垂直居中，若需兼容旧浏览器，可改用display: table配合vertical-align: middle。

Q2：图片加载失败时如何保证文字可见？
A：建议为<img>标签添加alt属性，并在CSS中设置background-image的备用方案。

.image-container {
  background-image: url('image.jpg'), url('fallback.png'); / 主备双图片 /