文字层叠效果的本质是mix-blend-mode触发的像素级混合，需父容器有背景且文字带透明度；常用值中screen适合亮字叠暗图，overlay容错率高，soft-light柔和但对细字体敏感。
文字层叠效果的本质是混合模式叠加，不是单纯定位
很多人以为用 position: absolute 把多层文字堆在一起就叫“层叠效果”，其实那只是视觉重叠；真正有质感的层叠（比如海报中常见的半透文字交叠出深浅渐变、色块渗透感），必须靠 mix-blend-mode 触发像素级混合。只设 absolute 而不设 blend 模式，所有文字还是各自为政，没有色彩交互。
关键前提：父容器需有背景（纯色、渐变或图片），且各文字元素需有透明度/半透明色值（如 rgba(0,0,0,0.6) 或 hsla()），否则混合无从发生。
mix-blend-mode 的常用值选哪个？别盲目用 multiply
multiply 确实最常被推荐，但它只适合深色文字叠在浅色背景上——如果背景是深灰或黑色，multiply 会让文字直接变黑消失。实际海报场景更常需要：
-
screen：亮色文字在暗背景上“发光”叠加，适合标题+暗图组合 -
overlay：兼顾明暗区域，保留高光与阴影细节，海报正文多层错位时容错率最高 -
soft-light：更柔和，适合手写体、文艺类海报，但对字体粗细敏感，细字可能“吃不进”效果
注意：mix-blend-mode 在 Safari 旧版（opacity + filter: blur(0.5px) 模拟轻微融合感）。
立即学习“前端免费学习笔记（深入）”；
absolute 定位要配合 transform 做微调，别只靠 top/left
全屏海报里，top: 50%; left: 50% 再加 transform: translate(-50%, -50%) 是居中基础，但层叠文字往往需要「非对称偏移」来制造动态感。这时直接改 top/left 会破坏响应性（尤其在移动端视口变化时）。
推荐做法：
- 统一设
top: 50%; left: 50%; transform: translate(-50%, -50%)作为基准锚点 - 每层文字再单独加
transform: translate(8px, -12px)这类小偏移（单位用 px 更可控，避免 rem/vw 在缩放时抖动） - 避免对同一元素同时设
top和transform，否则浏览器渲染可能冲突，导致文字边缘模糊
性能陷阱：mix-blend-mode 会强制触发层合成，慎用在动画中
只要元素启用了 mix-blend-mode，浏览器就会把它提升为独立图层（layer），这本身没问题；但如果这个元素还参与 transition 或 @keyframes（比如文字淡入+混合），就极易引发频繁的重绘（repaint）甚至重排（reflow）。
实操建议：
- 静态海报用
mix-blend-mode完全没问题，放心用 - 若需动效，把混合逻辑放在静止层（比如主标题），动画层（比如飘入的副标）改用
opacity+will-change: opacity，避开 blend - Chrome DevTools 的 “Layers” 面板可实时查看哪些元素被强制合成为层，快速定位卡顿源
真正难调的不是怎么叠，而是叠完之后某一层在 iPad Safari 上突然不混合了——这时候先检查父容器有没有 isolation: isolate，再确认颜色值是否用了不支持的 transparent 关键字（某些版本只认 rgba(0,0,0,0)）。
