rgba()比opacity更安全，因它仅控制背景色alpha通道，文字和按钮保持100%不透明且交互正常；opacity则使整块元素及子节点同步降级，导致移动端点击热区异常。
直接用 background-color: rgba() 设置背景色，别碰 opacity——后者会让文字、按钮、图标全变淡，交互区域也跟着失效。
为什么 rgba() 比 opacity 更安全
rgba() 只控制背景色的 alpha 通道，内容保持 100% 不透明；opacity 是整块元素及其所有子节点一起降级渲染。比如一个带“立即购买”按钮的卡片，用 opacity: 0.6 后，按钮不仅视觉模糊，点击热区在移动端可能缩窄甚至失灵。
-
background-color: rgba(0, 0, 0, 0.4)→ 背景透、文字清、按钮可点 -
opacity: 0.4→ 边框、文字、子元素全发虚，hover 和 focus 状态异常 - 若需过渡动画（如悬停渐显），
opacity可用，但必须把内容单独包裹一层，避免连带影响
.offcanvas-backdrop 或 .modal-backdrop 怎么调透明度
Bootstrap 5 的 offcanvas 和 modal 默认就用了 rgba(0, 0, 0, 0.5)，你不需要手写遮罩层。强行加一个 div.backdrop 会导致双遮罩、z-index 冲突，iOS 滚动还可能卡顿。
- 改透明度只动
background-color：.offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.3) !important; } - Bootstrap 5.2+ 支持 CSS 变量：
:root { --bs-offcanvas-backdrop-bg: rgba(0, 0, 0, 0.3); } - 别写
opacity: 0.3——它不改变遮罩逻辑行为，但会让用户误判是否可点击 - 设成
rgba(0,0,0,0)后，遮罩视觉消失，但 body 滚动仍被锁，必须同步加data-bs-backdrop="false"
想用 bg-opacity-* 类？先看前提条件
Bootstrap 5.2+ 的 bg-opacity-50 这类工具类不是万能开关：它只对当前元素的 background-color 生效，且该颜色**必须是 RGB 或 RGBA 格式**。而默认的 bg-light 是 #f8f9fa，不是 rgb()，所以 class="bg-light bg-opacity-50" 基本没反应。
立即学习“前端免费学习笔记（深入）”；
- 真正生效要两步：先把背景色重写为
rgb(248, 249, 250)（或rgba()），再加bg-opacity-75 - 支持的值只有
10、25、50、75、100，对应 0.1–1.0 - Bootstrap 5.0 及更早版本完全不识别这个类；IE 全系不支持
- 单独写
bg-opacity-50没背景色，等于透明了个寂寞
背景是图片或渐变时怎么叠半透明层
别用伪元素或额外 div，直接用 background 多层叠加。逗号分隔，前面的层在上，后面的在下。
div.hero {
background: rgba(0, 0, 0, 0.4), url(/img/hero.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
- 顺序不能错：半透层必须写在图片前面，否则会被盖住
- 如果父容器没显式高度（比如纯靠子内容撑开），记得加
min-height或height，否则rgba()没地方渲染 - 避免用
linear-gradient(rgba(), rgba())模拟——和background-color: rgba()效果一样，但多一层渲染开销
最常被忽略的是定位上下文：如果要用绝对定位的遮罩层盖在卡片或容器上，父容器必须有 position: relative，否则遮罩会相对于 body 定位，跑出预期范围。
