伪元素叠加背景第二层不显示，是因为::after必须设置content（如content:""）才能渲染，且父容器需有定位上下文；层叠顺序由dom顺序与z-index共同决定，推荐三者均设position: absolute和明确z-index。
用 ::before 和 ::after 叠加背景时，为什么第二层不显示？
伪元素默认不渲染，除非显式设置 content（哪怕只是 content: ""）。很多情况下第二层背景“消失”，其实是 ::after 根本没被浏览器创建出来。
-
::before和::after都必须带content才能触发渲染，缺一不可 - 父容器需有定位上下文（
position: relative或更高级定位），否则伪元素的absolute会相对于视口定位，容易跑偏 - z-index 要配合定位使用：没
position的元素，z-index无效 - 若背景图是
background-image，记得检查路径是否正确——伪元素无法继承父级的background
两层伪元素 + 真实内容，怎么控制谁在最上层？
层叠顺序由 DOM 顺序 + z-index 共同决定：::before 在最下，真实子内容居中，::after 默认在最上。但这个默认行为只在三者 z-index 相同时成立；一旦设了值，就按数值大小排。
- 给
::before设z-index: -1，它就会沉到父容器背景之下（可能被裁剪或不可见） - 真实内容（比如
<div>文字</div>）没有z-index时，层叠等级高于未定位的伪元素，但低于已设z-index的伪元素 - 推荐统一为三者都设
position: absolute+ 明确z-index，例如：::before { z-index: 1; }，内容{ z-index: 2; }，::after { z-index: 3; }
伪元素做多层背景，比直接用 background 多图语法差在哪？
原生 background: url(a.jpg), url(b.jpg), linear-gradient(...) 是单属性多层，性能好、语义清、支持 background-position 独立控制每层。而伪元素是额外 DOM 节点，带来真实开销。
- 每个伪元素都会触发重排重绘，尤其动画中频繁修改
transform或opacity时，比纯background更耗资源 - 响应式调整困难：伪元素尺寸靠
top/left/width/height控制，不如background-size: cover或contain直观可靠 - 可访问性风险：屏幕阅读器通常忽略伪元素，若某层背景含关键图标或提示，用伪元素就丢失信息
- 真正需要伪元素的场景是：某层要带阴影（
box-shadow）、要加模糊（filter: blur()）、或要独立缩放/位移动画——这些background做不到
移动端适配伪元素背景时，哪些 CSS 属性最容易出兼容问题？
iOS Safari 对伪元素的 filter、backdrop-filter 和某些 transform 组合支持滞后，Android WebView 则对 background-clip: text + 伪元素混用极不稳定。
-
backdrop-filter在 iOS 15.4 之前不支持伪元素，必须升级系统或降级为半透明遮罩 -
transform: scale(0.99)在旧版 Android WebView 中可能触发模糊渲染，建议改用transform: translateZ(0)强制 GPU 加速 - 避免在伪元素上写
background: image-set(...)，Safari 对伪元素里的image-set解析失败率高 - 测试真机时重点看：伪元素是否随 viewport 缩放错位、是否在 pinch-zoom 后失焦、是否在页面滚动时闪烁
background 多图语法；只有当某一层要动效、要滤镜、要遮罩裁剪，才值得引入伪元素这一层复杂度。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
