直接给<img>加background-color: rgba()无效，因其为替换元素；必须用position: relative容器包裹，再通过::after伪元素设inset: 0、border-radius和rgba()背景实现带圆角的半透明遮罩。
直接给 <img> 加 background-color: rgba() 是无效的——<img> 是替换元素，背景色不会渲染在图片内容下方，只会显示在图片“背后但不可见”的区域。必须用容器包裹再叠加图层。
用 ::after 伪元素加半透明白色背景层
这是最干净、兼容性好、不污染 DOM 的方案，适合大多数图文叠加场景：
- 外层
<div>必须设position: relative，否则伪元素会相对于 body 定位 -
::after要设content: ""、position: absolute、inset: 0（或top/left/right/bottom: 0），确保完全覆盖图片 - 白色背景用
background-color: rgba(255, 255, 255, 0.6)，alpha 值建议 ≥ 0.6，避免 PNG 透明区域穿底过重 -
<img>需设display: block，防止底部留白；若需居中，父容器可加text-align: center或display: flex
图片带圆角时遮罩也要同步圆角
如果图片本身有 border-radius（比如头像、卡片图），遮罩层必须匹配圆角，否则边缘会漏出原图：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 容器（外层
<div>）要同时设border-radius和overflow: hidden，这是关键 -
::after伪元素也必须设相同值的border-radius，否则遮罩会撑出直角 - 若用
border-radius: 50%做圆形头像，遮罩也要写border-radius: 50%，不能省略 - 避免用
opacity控制遮罩透明度——它会让整个伪元素变淡，包括边框、文字阴影等；坚持用rgba()的 alpha 通道
文字叠加在半透明背景上要注意可读性
白色遮罩虽提亮了暗图，但也可能让深色文字发灰。不是加完遮罩就完事：
立即学习“前端免费学习笔记（深入）”；
- 文字颜色优先选纯黑（
#000）或深灰（#333），别用浅灰，否则对比度不足 - 加
text-shadow: 1px 1px 2px rgba(255,255,255,0.8)可提升边缘清晰度，尤其在复杂背景前 - 如果文字是标题类信息，建议把遮罩 alpha 降到 0.4～0.5，保留更多图片细节，靠文字样式补足辨识度
- 切忌把文字和遮罩都设成
opacity: 0.7——两层半透叠加后实际不透明度远低于预期，容易糊成一片
真正难的不是写对那几行 CSS，而是每次改图都要同步检查容器尺寸、z-index 层级、overflow 行为和响应式断点下的遮罩贴合度。一个没设 overflow: hidden 的圆角容器，在 Safari 下可能直接露出遮罩直角边——这种细节，只有真正在不同设备上点开开发者工具逐帧看才记得住。
