给图片加带阴影的文字描述，核心是用容器包裹图片和文字，设父容器position: relative、文字position: absolute并置于顶层，再通过text-shadow: 1px 1px 2px black等参数添加清晰阴影，确保可读性与语义正确。
给图片加带阴影的文字描述，核心是把图片和文字放在同一容器中，再用 CSS 给文字设置 text-shadow，同时确保文字层叠在图片上方（通常用 position + z-index 控制）。
1. 基础结构：用容器包裹图片和文字
不推荐直接在 <img> 标签里写文字（HTML 不允许），必须用一个父容器（如 <div>）包住图片和描述文字：<font color="#666"><pre class="brush:php;toolbar:false;"><div class="img-with-caption">
@@##@@
<p class="caption">夕阳下的湖面</p>
</div></pre></font><h3>2. 定位文字：让文字浮在图片上</h3>
<p>常用方式是设父容器为 <code>position: relative，文字设 position: absolute，再用 bottom、left 等控制位置：
.img-with-caption {
position: relative;
display: inline-block; /* 避免撑满整行 */
}
.img-with-caption img {
display: block; /* 消除图片下方空白 */
}
.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 8px 12px;
background: rgba(0,0,0,0.6); /* 半透黑底，提升可读性 */
color: white;
font-size: 14px;
}3. 添加文字阴影：用 text-shadow 实现立体感
在 .caption 中加入 text-shadow，格式为：水平偏移 垂直偏移 模糊半径 颜色。常见实用组合：
-
text-shadow: 1px 1px 2px black;—— 简洁清晰的深色阴影 -
text-shadow: 0 2px 4px rgba(0,0,0,0.5);—— 更柔和，适合带背景的文字 - 多层阴影可叠加，例如：
text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,0.3);
4. 可选优化：响应式与可访问性
确保在小屏幕下文字不溢出，且语义正确：
- 给
<p class="caption"></p>加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止换行错位（若需单行） - 如需更好语义，可用
<figure><img src="photo.jpg" alt="风景照"><figcaption></figcaption></figure>结构，再用 CSS 定位，<figcaption></figcaption>天然具有语义价值 - 阴影颜色避免与背景对比过弱，确保 WCAG 可读性（文字+阴影+背景整体对比度 ≥ 4.5:1）
