伪元素::before必须设置content属性才能渲染，否则不生成盒模型；正确写法是content: ""，配合position、background等样式实现遮罩层。
伪元素 ::before 必须带 content 属性才能渲染
很多人写完 ::before 样式却看不到遮罩层，根本原因是漏写了 content: ""。CSS 规范规定：伪元素若无 content 值（包括 none），默认不生成盒模型，后续的 position、background 全部失效。
常见错误写法：.box::before { background: rgba(0,0,0,0.6); } —— 这行代码什么都不会显示。
正确做法是显式声明空字符串：
.box::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
-
content只能是字符串、attr()或none，不能省略 - 即使只想要纯色层，也必须用
""，不能写none - 若需兼容旧版 Safari（content: "" +
display: block组合，直接靠position和尺寸控制即可
父容器必须设 position: relative 才能约束 ::before 定位
::before 是绝对定位时，它的参照系是最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。如果父容器没设 position，::before 会相对于 定位，导致遮罩层错位或溢出。
典型结构：
<div class="img-wrapper"> @@##@@ </div>
对应 CSS 必须包含：
.img-wrapper {
position: relative; /* 关键！ */
display: inline-block; /* 防止 img 撑满整行导致 wrapper 宽度异常 */
}
- 不要依赖
img自身设position: relative—— 它不是::before的祖先，无效 - 如果父容器是
flex或grid容器，仍需额外加position: relative，布局模式不替代定位上下文 - 用
inline-block而非block可让 wrapper 紧贴图片内容宽高，避免遮罩层覆盖多余空白
遮罩层不拦截鼠标事件要用 pointer-events: none
当遮罩层盖在可点击元素（如按钮、链接、图片本身）上时，用户点不到底层内容——这是默认行为。多数场景下你希望遮罩只是视觉层，不干预交互。
解决方案就是加一行：
.img-wrapper::before {
pointer-events: none;
}
- 仅对遮罩层本身生效，不影响子元素（但
::before没子元素，所以等效于“完全透传”） - 如果遮罩层需要响应 hover 或点击（比如悬停显示文字），就**不能**加这句，而是改用
z-index分层 + 单独绑定事件 - 注意：IE11 不支持
pointer-events: none在伪元素上，如需兼容，得用真实 DOM 元素替代::before
object-fit 缩放后遮罩要贴合可视区域，别用 background-image
当图片用了 object-fit: cover 或 contain，它的渲染区域和原始尺寸不一致。此时若用父容器的 background-image + rgba 叠加，遮罩会铺满整个容器盒，可能覆盖圆角裁剪外的空白，或与图片实际可视区错位。
而 ::before 是覆盖在图片之上的层，只要父容器尺寸与图片渲染后一致（通常由 img 自身撑开），它就能自然跟随 object-fit 的裁剪结果。
- 确保
img设置了明确的宽高（如width: 100%; height: 200px），否则::before的100%会按父容器计算，不一定匹配图片可视区 - 如果图片宽高比不确定，用
aspect-ratio配合object-fit更稳妥，::before依然能对齐 - 想实现渐变遮罩？用
background: linear-gradient(rgba(...), rgba(...))替代单色，一样生效
实际中最容易被忽略的是 content: "" 和 position: relative 这两个前提条件——缺一不可。很多调试半天的问题，其实就卡在这两行代码上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
