直接用 background-image 更稳妥，因其无需额外定位、减少渲染层且避免 z-index 冲突；::after 仅适用于需独立缩放/遮罩/错位的装饰性图层。
为什么直接用 background-image 比伪元素更稳妥？
绝大多数场景下，带背景图片的响应式容器根本不需要用 ::after。直接在容器上设 background-image + background-size: cover + background-position: center，配合 aspect-ratio 或 padding-top 奇技淫巧，就能干净实现宽高自适应。用伪元素反而多一层渲染、多一重定位控制、多一个 z-index 烦恼。
::after 适合什么真实需求？
只有当你要叠加一层「不可交互的装饰性图层」，且该图层需独立缩放、遮罩或与内容错位时，::after 才有意义。比如：在文字卡片上加一层半透明渐变蒙版；在按钮右上角叠加徽章图标；或实现「背景图+固定比例占位+内容居中」三者分离的布局。
- 必须给
::after设content: ""，否则不渲染 - 必须设
position: absolute（父容器需position: relative） - 宽高不能依赖内容，得显式设为
100%或具体值 -
background-image在伪元素上生效，但background-size: cover行为受父容器尺寸约束，不是“自身尺寸”
响应式失效的三个典型坑
很多人写完发现图片拉伸、裁切异常或根本不显示，问题往往出在这儿：
- 父容器没设
height且内部无内容撑开，::after的100%高度算出来是0 - 用了
aspect-ratio但浏览器不支持（Safari 15.4+ 才稳定），降级方案缺失 -
background-image路径错误或跨域被拦截，控制台报net::ERR_FAILED却没检查 Network 面板
安全做法：先用 border: 1px solid red 确认 ::after 渲染位置和尺寸，再加背景图。
立即学习“前端免费学习笔记（深入）”；
一个真正可用的最小代码块
以下实现「固定 16:9 容器，背景图居中覆盖，内容绝对居中」：
.card {
position: relative;
width: 100%;
aspect-ratio: 16/9; /* Safari 15.4+ 支持，旧版 fallback 用 padding-top */
}
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
z-index: -1;
}
.card > * {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}注意：z-index: -1 是关键，否则伪元素会盖住内容；aspect-ratio 不支持时，得补一句 padding-top: 56.25% 并把子元素改为 position: absolute 布局。
伪元素不是背景图的替代方案，而是叠加层的辅助手段。真要响应式背景，优先查 background-image 的现代属性支持度，别一上来就套 ::after。
