图片作背景时，文字精准叠右下角需用background-image配合position: relative父容器与position: absolute文字层，并设bottom: 16px; right: 16px；伪元素::before加rgba底色更可控。
图片作为背景时，文字怎么精准叠在右下角
直接用 background-image 配合 background-color: rgba() 无法让文字“叠”上去——因为背景是装饰层，文字得自己定位。真正起作用的是把图片当 background-image，再用子元素（比如 <div> 或 <code><p></p>）配合 position: absolute 做文字层。
常见错误是给父容器设了 position: relative，但忘了限制宽高，导致绝对定位的文字飘到视口外；或者没设 z-index，文字被其他层盖住。
- 父容器必须设
position: relative（否则absolute会相对于最近已定位祖先，可能不是你想要的） - 父容器推荐设明确的
width和height，或用aspect-ratio控制比例 - 文字容器加
position: absolute; bottom: 16px; right: 16px;就能锚定右下角 - 如果要半透底色衬文字，别用
background: rgba()直接涂在文字上——容易看不清，改用伪元素::before铺一层带透明度的色块更可控
为什么不用 img 标签而用 background-image
用 <img> 标签时，图片是流内元素，想让文字叠加就得把它变成 position: absolute，但这样图片就脱离文档流，父容器可能塌陷，还得额外处理高度。而 background-image 是纯装饰，不参与布局，父容器高度可由其他内容或显式尺寸控制，更稳定。
另外，background-image 支持 background-size: cover、background-position: center 等缩放定位能力，响应式适配比 <img> + object-fit 更早兼容（尤其老版 Safari）。
- 需要 SEO 或图片需被爬虫索引？必须用
<img>，此时建议用object-fit: cover+position: absolute文字层，并给父容器设min-height - 只是视觉装饰（如 Banner 图、卡片背景），优先选
background-image -
background-image不支持srcset响应式切换，需配合媒体查询或image-set()（兼容性有限）
rgba() 是加在文字背景上，还是图层混合上
rgba() 本身不是图层混合模式，它只是颜色通道带 alpha 透明度。所谓“文字半透底色”，实际是给文字容器加一个同宽高的伪元素，用 background: rgba(0, 0, 0, 0.6)，再把文字设为白色——这样文字始终清晰，底色又不压图。
不要对图片本身应用 rgba()（图片没有颜色值可 rgba），也不要对文字直接设 color: rgba(255,255,255,0.8) 来“融合”，那只会让文字发虚，对比度下降。
- 正确做法：文字容器设
position: relative，然后&::before生成一层position: absolute; inset: 0; background: rgba(0,0,0,0.55); border-radius: 4px; - 文字本身保持
color: white和足够字号（至少14px），避免透明叠加后可读性崩坏 - 深色文字配浅色图？把
rgba()换成rgba(255,255,255,0.7)并加text-shadow: 0 1px 2px rgba(0,0,0,0.3)提升轮廓
移动端适配时 absolute 定位偏移失效怎么办
最常见原因是父容器用了 vw/vh 单位设宽高，但没配合 background-size: cover，导致图片拉伸后，bottom: 16px 看起来位置不对——其实位置没变，是图片内容变了。另一个坑是 iOS Safari 对 inset 属性支持不全（尤其旧版本），top: 0; right: 0; bottom: 0; left: 0 更稳。
- 用
@media (max-width: 768px)单独调文字font-size和padding，别只依赖 viewport 缩放 - 避免用
%值做absolute的top/right，它基于父容器宽高计算，在图片未等比缩放时会错位 - 测试真机时重点看 Safari，它对
background-attachment: fixed和transform与absolute的组合有渲染 bug，尽量规避
rgba() 能直接混图——它不能，它只是颜色。
