bg-opacity-75未生效最常见原因是未与bg-*类配合使用，它仅将已有背景色转为rgba并设alpha=0.75，单独使用无效；需搭配如bg-light或bg-dark，且要求bootstrap 5.1+。
bg-opacity-75 类为什么没生效
最常见原因是它没和 bg-* 类成对使用——bg-opacity-75 本身不带背景色，只负责把已存在的 background-color 转成 rgba() 并设 alpha=0.75。单独写 class="bg-opacity-75"，浏览器根本找不到可操作的背景色，自然没反应。
必须显式配一个背景类，比如：class="bg-light bg-opacity-75" 或 class="bg-dark bg-opacity-75"。Bootstrap 5.1+ 才支持这个组合，v5.0 及更早版本直接忽略该类。
- 检查 Bootstrap 版本：运行
bootstrap.version（在控制台）确认 ≥ 5.1 - 用开发者工具看元素 computed 样式，确认
background-color是否已变成rgba(..., 0.75) - 如果用了自定义背景色（如
style="background-color: #fff"），bg-opacity-*不会接管——它只响应 Bootstrap 自带的bg-*类生成的背景
bg-opacity-75 和 opacity-75 的区别在哪
bg-opacity-75 只动背景层；opacity-75（如果存在）会把整个元素及其子节点一起变透明。前者文字清晰、按钮可点；后者连图标、文字、交互反馈都模糊了。
典型误用场景：给导航栏加 opacity-75，结果菜单文字发虚、下拉箭头看不清、hover 效果变弱——这不是背景半透，是整块降级。
-
bg-opacity-75→ 安全用于需要“背景淡入但内容保真”的地方，比如卡片浮层、模态框内容区 -
opacity-75→ Bootstrap 5 默认不提供这个类，强行写无效；若自行扩展，务必确认是否真需要全局透明 - 两者不能混用：
bg-light bg-opacity-75 opacity-75会导致背景和内容双重变淡，极易造成可读性灾难
bg-opacity-75 在 navbar 上怎么用才不出错
直接给 .navbar 加 bg-light bg-opacity-75 往往没效果，因为 .navbar-collapse、.navbar-nav 等子容器自带白色背景，把半透盖住了。
正确做法是覆盖所有可能遮挡的层级，且清除干扰属性：
- 确保
.navbar本身有bg-*类（如删掉navbar-light，手动加bg-white） - 同时给
.navbar-collapse加相同组合：class="bg-white bg-opacity-75" - 清除默认渐变：
background-image: none !important（Bootstrap 5 默认加了浅色linear-gradient） - 别忘了
border和box-shadow，它们会破坏透明感，需一并设为none
alpha 值低于 0.6 时要注意什么
bg-opacity-10 到 bg-opacity-50 这些低值类容易让文字在浅底上失效，尤其搭配 bg-light（#f8f9fa）时，alpha=0.4 下文字对比度常跌破 WCAG AA 标准。
实测建议：
-
bg-light bg-opacity-75→ 文字仍可用，推荐最小值 -
bg-dark bg-opacity-25→ 深色背景+低透明反而更安全，因深色底本身对比强 - 永远用浏览器开发者工具的“颜色对比度检查”功能验证，别凭肉眼判断
- 移动端高亮文字（如
.nav-link:hover）需额外设background-color: rgba(0,0,0,0.1)，否则 hover 时背景消失导致焦点丢失
