背景图片遮罩本质是叠加半透明色层，通过bg-gradient-to-t与bg-[url(...)]多背景实现顶部渐变遮罩，需注意背景书写顺序（先渐变后图片），或用before伪元素实现更灵活控制。
背景图片遮罩的本质是叠加一层半透明色层
不是 Tailwind 本身提供了“遮罩”组件，而是用 bg-gradient-to-t 或 bg-black/50 这类工具类，在图片容器上叠一层渐变或纯色，降低底层图片的视觉干扰，让上面的文字更易读。关键在于图层顺序和混合方式——图片必须是背景（bg-[url(...)]），遮罩层必须是同一元素的另一个背景，且用 bg-gradient 覆盖在它上面。
用 bg-gradient-to-t + bg-[url(...)] 实现顶部深色渐变遮罩
这是最常用、兼容性最好、无需额外 wrapper 的写法。Tailwind 支持多背景（comma-separated），但要注意顺序：**后写的背景在下层，先写的在上层**（CSS 规则）。所以要把渐变写在前面，图片写在后面：
class="bg-gradient-to-t from-black/70 via-transparent to-transparent bg-[url('/hero.jpg')] bg-cover"
常见错误：
- 把
bg-[url(...)]写在前面 → 渐变被图片盖住，完全不可见 - 用
from-black/20但没加via-transparent→ 渐变不平滑，边缘生硬 - 漏掉
bg-cover或bg-center→ 图片拉伸变形或只显示局部
用 before 伪元素做更灵活的遮罩控制
当需要独立调节遮罩透明度、方向、甚至加动画时，单靠多背景不够。此时用伪元素更可控，且不影响内容流布局：
立即学习“前端免费学习笔记（深入）”；
class="relative bg-[url('/hero.jpg')] bg-cover"<br><div class="absolute inset-0 before:absolute before:inset-0 before:bg-gradient-to-b before:from-black/80 before:to-transparent"></div>
优点和注意点：
-
before层可单独加transition或animate类，比如 hover 时渐变变浅 - 必须给父容器设
relative，否则absolute伪元素会相对 body 定位 - 别忘了
inset-0让伪元素铺满整个容器，否则遮罩尺寸不对 - 如果容器有 padding，伪元素默认不包含 padding 区域，需显式设
content-box或调整尺寸
避免文字反白失效：遮罩太浅时 text-white 仍看不清
哪怕用了 from-black/60，如果原图局部很暗（比如夜景天空），文字依然可能发灰。这不是 Tailwind 的问题，是对比度不足：
- 优先调高遮罩浓度，比如从
/50改成/70，比调文字颜色更可靠 - 慎用
text-black配浅色遮罩——容易陷入“越调越糊”的循环 - 真要保底，可在文字外再套一层
bg-black/20 px-2 rounded微遮罩，但会破坏设计一致性 - 无障碍要求高的场景，直接测 WCAG 对比度（至少 4.5:1），别凭感觉调
真正难的不是写对 class，而是判断哪一段图需要多厚的遮罩、哪块文字区域实际落在渐变薄弱区——得开浏览器 devtools 用 eyedropper 看真实像素值。
