用::after叠加文字需将图片设为容器背景图而非img标签，因img是替换元素不支持伪元素；容器须设position: relative，::after需content且用transform居中；适配明暗图需text-shadow，移动端建议用px/vw单位，复杂需求应改用真实子元素。
用 ::after 叠加文字的前提是图片必须是背景图
直接在 <img alt="css 图片上叠加文字怎么实现_使用 after 伪元素叠加内容" > 标签上用 ::after 是无效的——因为 <img alt="css 图片上叠加文字怎么实现_使用 after 伪元素叠加内容" > 是替换元素（replaced element），不支持伪元素内容渲染。必须把图片设为容器的 background-image，再让容器定位 + ::after 绝对定位叠加。
- 容器需设置
position: relative，否则::after的absolute会相对于最近有定位的祖先，行为不可控 -
::after必须声明content（哪怕只是空字符串""），否则不渲染 - 若文字需要响应式或换行，
::after内联特性限制大，建议改用真实子元素；仅适合简单、静态标签（如“NEW”、“HD”）
::after 文字居中覆盖的典型写法
常见需求是文字垂直水平居中在图中央。关键是利用 top: 50% + left: 50% + transform: translate(-50%, -50%) 组合，避免依赖固定宽高。
.image-overlay {
position: relative;
width: 300px;
height: 200px;
background-image: url('photo.jpg');
background-size: cover;
}
.image-overlay::after {
content: "Sale";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px black;
z-index: 1;
}
字体大小和颜色适配暗/亮图的坑
同一张 ::after 文字样式无法自动适配明暗背景图。如果图有明有暗，纯靠 CSS 无法判断亮度，容易出现文字看不清。
- 不要只设
color: white就完事——深色图上白字可读，浅色图上就糊了 - 最稳妥的是加
text-shadow（如text-shadow: 0 0 4px rgba(0,0,0,0.6)），提供底层衬底 - 若需精准控制，得靠 JS 读取图片平均亮度，或服务端预生成带文字的图，CSS 伪元素本身不具备图像分析能力
移动端缩放时文字变形或错位
::after 使用绝对定位 + 百分比偏移，在 viewport 缩放或 rem/em 动态字号下容易失准，尤其 iOS Safari 对 transform 渲染有细微差异。
立即学习“前端免费学习笔记（深入）”；
- 避免用
em或rem设置::after的font-size，改用px或vw更稳 - 若容器宽高非固定（比如
width: 100%），确保父级有明确 max-width 或 aspect-ratio，防止拉伸导致定位漂移 - 真要兼顾多端，建议放弃
::after，改用<div class="overlay-text">Sale</div>—— 更可控，也方便加 transition 或 JS 动态更新
::after 叠加文字是个“能用但别太依赖”的方案：它轻量、无 DOM 增长，但缺乏灵活性和鲁棒性。一旦需求变成“点击文字跳转”“文字随图懒加载后显示”“支持多语言动态插入”，就得切回真实元素。 
