使用::before叠加颜色层需满足三个条件：图片或其父容器设position: relative，::before设position: absolute并用inset: 0或top/left/width/height填满，且必须声明content: ""；rgba背景透明度建议0.3–0.6；响应式时推荐将relative定位加在父div上，并同步设置border-radius；ie11不支持inset需回退为四方向写法。
用 ::before 伪元素叠加颜色层，图片必须设 position: relative
不加定位，::before 会相对于最近的定位祖先定位，而不是图片本身。常见现象是颜色层飘到页面左上角，或完全不见。
实操建议：
- 给
<img>或其父容器加position: relative（推荐包一层<div>，更可控） <li> <code>::before设position: absolute，并用top: 0; left: 0; width: 100%; height: 100%填满 - 确保
z-index足够高，避免被其他内容遮挡 - 必须写
content: ""（空字符串也不可省略） -
background-color: rgba(0, 0, 0, 0.4)中的 alpha 值建议在0.3–0.6之间：太低看不出效果，太高压住图片细节 - 避免用
opacity替代rgba()—— 它会让整个伪元素（含可能加的图标、文字）一起变透明 - 把
position: relative加在包裹<img>的父<div> 上，而非 <code><img>自身 -
::before使用inset: 0（等价于top/left/bottom/right: 0），比单独写四个方向更健壮 - 若图片有圆角（
border-radius），记得给伪元素也加相同值，否则边缘漏底色 - 兼容 IE11 时，显式写
top: 0; right: 0; bottom: 0; left: 0 - 不用
transform: translate(-50%, -50%)居中 —— 这种写法依赖固定尺寸，对响应式图片不友好 - 如果项目已弃用 IE，
inset更简洁，且 CSSOM 解析效率略高
rgba() 背景色要配合 content: "" 才生效
伪元素默认不渲染，即使设了背景色也看不到。很多人卡在这一步，检查控制台发现 ::before 根本没生成 DOM。
实操建议：
图片响应式时，伪元素要同步缩放，不能只靠 width: 100%
当图片用 max-width: 100%; height: auto 自适应时，::before 可能拉伸变形，尤其在宽高比变化大的容器里。
实操建议：
IE11 不支持 inset，老项目需回退写法
inset: 0 在 IE11 及更早版本中无效，伪元素会消失。错误现象是现代浏览器正常，但测试时发现 IE 里颜色层没了。
实操建议：
content、父元素没定位、或者图片本身被设了 display: block 但忘了清除默认下边距导致高度计算偏差。这些点不报错，但效果直接消失。
