推荐使用语义化的 <figure> + <figcaption> 组合，通过 text-shadow: 2px 2px 4px rgba(0,0,0,0.5) 实现清晰阴影标题；也可用绝对定位将标题压于图上，配合高对比色与多层阴影提升可读性与质感。
给图片加带阴影效果的标题文字，核心是把文字（标题）和图片组合起来，并用 CSS 的 text-shadow 实现文字阴影，同时确保文字清晰可读、位置合理。不需要 JS，纯 HTML + CSS 就能搞定。
方法一：用 <figure> + <figcaption>（推荐语义化写法）
这是最标准、语义最清晰的方式，适合图文搭配场景：
<figure>
<img src="photo.jpg" alt="风景照">
<figcaption style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
margin-top: 8px;
font-weight: bold;">
这是一张山间日落
</figcaption>
</figure>
说明：
-
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色—— 这是关键，例如2px 2px 4px rgba(0,0,0,0.5)表示向右下偏移 2px、模糊 4px、半透明黑色阴影 - 把
<figcaption>放在<img>后面，浏览器默认块级显示，自然换行居下 - 可额外加
margin-top控制图文间距，用font-weight或color提升可读性
方法二：用绝对定位实现更灵活排版（如标题压在图上）
适合封面图、海报式设计，让标题叠加在图片上方并带阴影：
立即学习“前端免费学习笔记（深入）”；
<div style="position: relative; display: inline-block;">
<img src="banner.jpg" alt="横幅图" style="display: block;">
<div style="position: absolute;
bottom: 12px; left: 16px;
color: white;
text-shadow: 2px 2px 4px black;
font-size: 1.4em;
font-weight: bold;">
秋日私语
</div>
</div>
说明：
- 外层
div设为position: relative，作为定位参考 - 标题
div设为position: absolute，用top/bottom/left/right精确控制位置 - 文字颜色建议用高对比色（如白字+黑影），避免被背景干扰
- 阴影方向建议与光源逻辑一致（比如常用右下阴影模拟自然光）
小技巧：让阴影更自然、适配不同背景
单靠一层阴影有时不够，可微调提升质感：
- 用多层阴影增强立体感：
text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
（多个阴影用逗号分隔，模拟更深投影） - 阴影颜色不一定是纯黑 —— 浅色背景可用深灰（
#333），深色背景可用浅灰（#eee）或加透明度（rgba(255,255,255,0.7)） - 配合
background: rgba(0,0,0,0.4)给文字加半透明底衬，大幅提升可读性（尤其用在复杂图上）
注意避坑
常见问题和解决思路：
-
阴影看不见？ 检查是否被父容器
overflow: hidden裁剪，或文字颜色与阴影色太接近（比如白字+白影） -
移动端文字太小？ 加
font-size: clamp(1rem, 4vw, 1.4rem);实现响应式字号 -
IE 不支持
text-shadow？ IE10+ 支持，若需兼容老版本，可用 SVG 文字或伪元素模拟，但现代项目通常无需考虑
