伪元素渐变遮罩是最简单可控的方案，需用position: relative容器、inset: 0定位、content: ""、z-index分层及rgba()调透明度，避免opacity和错误transition写法。
直接用 ::before 或 ::after 叠加一层渐变背景，是最简单、兼容性最好、也最可控的渐变遮罩方案。它不依赖 mask-image 的浏览器分歧，也不需要额外 DOM 节点。
伪元素必须配合 position: relative 容器才能精准贴图
图片或背景容器本身不支持伪元素，所以必须套一层父容器，并设 position: relative —— 否则 ::before 会相对于 body 定位，完全盖不住目标区域。
- 容器需有明确宽高（或由内容撑开），不能是空 div
-
::before必须写content: ""，否则 Safari/旧 Edge 直接不渲染 - 定位推荐用
inset: 0（等价于top: 0; left: 0; right: 0; bottom: 0），比width: 100%; height: 100%更可靠，尤其在 flex/grid 布局中 - 记得加
z-index: 1（遮罩层）和z-index: 2（内容层），避免被意外压住
background: linear-gradient() 是遮罩层的核心，不是装饰
这里用的不是“叠加亮色”，而是用渐变控制透光程度：比如 linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) 表示顶部深、底部透明，文字放底部就能自然可读。
- 别用
opacity控制整体透明度——它会让渐变过渡变灰、发虚；应直接调rgba()的 alpha 值 - 渐变方向要匹配内容排布：标题在上？用
to bottom；文字居中？用to top, to bottom双向叠加 - 响应式下若图片宽高比变化，遮罩可能错位——此时优先保证容器
aspect-ratio固定，或改用background-size: cover+background-position对齐关键区域
悬停动画必须把 transition 写在常态规则里
很多人写成 .box:hover::before { background: ..., transition: ... }，结果动画不触发——因为 transition 是在 hover 状态才声明的，浏览器没机会做缓动计算。
- 正确写法：
.box::before { transition: background 0.4s ease; }，再在:hover中只改属性值 - 如果同时动多个属性（如
background和opacity），建议拆成独立过渡，避免颜色渲染异常 - 高频交互（如鼠标跟随）慎用
transform: scale()配合渐变，某些安卓 WebView 会出现重绘撕裂；优先用background-position移动渐变起点
真正容易被忽略的是：伪元素遮罩的本质是「视觉模拟」，它不改变原图 alpha 通道，所以无法实现 SVG 级别的精确镂空或边缘羽化。如果你需要蒙版边缘与文字像素级对齐，或者要做动态裁切（比如圆形头像+渐变边框），就得切到 mask-image + SVG
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
