直接用::after叠图片常无效，因img是替换元素且::after默认inline、无定位上下文；需父容器设position:relative、::after设absolute+宽高+content:""，再配渐变背景与pointer-events:none。
为什么直接用 ::after 叠在图片上经常没效果
因为 ::after 默认是 inline 元素，且不参与文档流定位——如果父容器没设 position: relative，::after 的 position: absolute 会往上找最近的定位祖先，甚至跑到 body 顶部；更常见的是，图片是 <img> 标签，它本身是替换元素，::after 无法自然“盖”在它上面，除非父容器明确包裹并建立定位上下文。
::after 叠加渐变层必须满足的三个条件
缺一不可，否则渐变层不显示、错位或被裁剪：
- 父容器（比如
<div class="hero">）必须设置 <code>position: relative -
::after必须设position: absolute，且top: 0; left: 0; width: 100%; height: 100% -
content属性不能省——哪怕只写content: ""，否则整个伪元素不渲染
渐变层代码怎么写才真正可用
用 background: linear-gradient() 是最稳妥的方式，避免用 opacity 或半透明色块影响文字对比度。下面这段可直接复制进项目：
.hero {
position: relative;
width: 100%;
height: 400px;
}
.hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2) 70%, transparent);
pointer-events: none;
}
注意：pointer-events: none 是关键——它让渐变层不拦截鼠标事件，文字链接和按钮仍能正常点击。
文字放哪里？z-index 和字体颜色怎么配
文字内容必须放在同一父容器内（即 .hero 里），且要设 position: relative 和足够高的 z-index，否则会被渐变层盖住：
- 文字容器不要用
position: absolute覆盖整个图，否则响应式下容易错位；推荐用position: absolute+inset: 20px或padding配合flex垂直居中 - 字体颜色优先选纯白
color: #fff，再用text-shadow: 0 1px 4px rgba(0,0,0,0.5)加一层软边，比单纯调 opacity 更可靠 - 别依赖渐变层“自动提亮文字”——深色渐变+浅色字才是高可读性组合，反过来（浅渐变+白字）在移动端阳光下几乎不可读
最易被忽略的一点：渐变方向要匹配文字位置。标题在图底部？用 linear-gradient(to top, ...)；文字偏左？改用 to right 并调整色标百分比。固定写死 to bottom 在真实场景中大概率导致关键文字区域没遮盖或过暗。
