图文叠加需容器设position: relative，文字设position: absolute并配合top/left等定位；z-index仅对定位元素生效；图片用object-fit: cover或background-size: cover；文字用clamp()弹性缩放；伪元素::before加半透明遮罩提升可读性。
用 position: relative 和 position: absolute 控制图文层叠关系
图文叠加的本质是让文字“浮”在图片上，而不是默认的上下排列。必须给容器设 position: relative，再让文字元素（如 <div> 或 <code><h3></h3>）设 position: absolute，否则 absolute 会相对于整个页面定位，导致错位。
常见错误：只给文字加 absolute，但父容器没设 relative —— 文字直接飞到视口左上角。
- 容器（如
<article></article>或<div class="card">）必须有 <code>position: relative - 叠加文字需明确设置
top、left、bottom或right，否则默认为0，可能被裁切 - 若图片是背景图（
background-image），容器仍需relative，否则文字无法准确定位 - 给
<img alt="HTML中如何实现图文叠加的卡片样式" >加display: block消除默认行内间隙 - 文字容器设
z-index: 2，图片或背景容器设z-index: 1（仅当两者都是定位元素时才需） - 用
min-height或aspect-ratio固定卡片高度，防止文字随图片缩放错位 - 文字颜色务必考虑图片明暗——别用纯黑文字盖在深色区域上
- 图片区域推荐用
object-fit: cover（<img alt="HTML中如何实现图文叠加的卡片样式" >）或background-size: cover（背景图）保持裁剪比例 - 文字用
rem或clamp()（如font-size: clamp(1rem, 4vw, 1.5rem)）实现弹性缩放 - 绝对定位坐标建议用
vw或百分比（如bottom: 1rem），避免固定像素值在不同设备失效 - 慎用
transform: translate(-50%, -50%)居中——它依赖元素自身宽高，而文字宽高不确定时易偏移 - 给卡片容器加
position: relative，再写.card::before设position: absolute覆盖全图 -
content: ""不可省；inset: 0比top/left/bottom/right: 0更简洁 - 遮罩推荐
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%)，让底部文字更清晰 - 文字颜色用白色即可，无需额外阴影——遮罩已提供足够对比
避免文字被图片遮挡或溢出的尺寸与 z-index 处理
即使定位正确，文字仍可能被截断、模糊或看不见，多数因层级或盒模型问题。CSS 的 z-index 只对定位元素生效，且需配合 position 才起作用。
典型现象：img 标签在文字下方，但文字还是看不清——其实是图片加载失败后留白，或图片未设 display: block 导致底部留缝隙。
立即学习“前端免费学习笔记（深入）”；
响应式图文叠加中图片适配的关键写法
用 <img alt="HTML中如何实现图文叠加的卡片样式" > 标签时，width: 100% + height: auto 是基础，但叠加文字的位置容易在小屏偏移。用背景图方式更可控，但需注意 background-size 和 background-position 的组合。
错误做法：对文字用 font-size: 16px 固定大小，结果小屏上文字撑出卡片。
用伪元素叠加装饰性文字或遮罩提升可读性
纯文字压图常因对比度不足导致阅读困难。最轻量的解法不是换字体或加描边，而是用 ::before 在图片上叠一层半透明遮罩，再把文字放在遮罩上方。
这个技巧不新增 DOM，兼容性好（IE9+），且遮罩可独立控制透明度和渐变方向。
absolute 文字不遮挡底层链接，或统一用 pointer-events: none 控制交互层。
