直接修改 background-color 为 rgba() 并加 !important 才生效，需同步重设 color 和 border-color 以保障可读性与边框清晰度，禁用 bg-opacity-* 工具类，渐变背景须显式设 background-color: transparent !important。
直接改 background-color 为 rgba() 才生效
Bootstrap 的 .alert 类用的是带 !important 的 background-color，不是 background 或 opacity。写 .alert { opacity: 0.8; } 会让文字、图标、关闭按钮一起变淡，可读性直接崩坏。唯一可靠起点是：.alert { background-color: rgba(255, 255, 255, 0.9) !important; }。别漏掉 !important——否则 Bootstrap 原始规则权重更高，样式压根不生效。
必须同步重设 color 和 border-color
原生 .alert-warning 的文字色 #856404 是按不透明背景设计的，换成 rgba(255, 255, 255, 0.9) 后对比度暴跌，阳光直射下几乎不可读。边框也一样：半透背景下若不加实色边框，警示框边缘会“融化”。
.alert-warning { color: #5a4a04 !important; border-color: #ffc107 !important; }- 推荐用 WebAIM Contrast Checker 校验，文本与背景最低要达 4.5:1
- 别只改
.alert-warning，漏掉.alert-danger或.alert-success会导致样式不一致
别用 bg-opacity-* 工具类碰运气
Bootstrap 5.2+ 的 bg-opacity-25 看似方便，但它只对 RGB/RGBA 背景色生效。而 bg-warning 底层是十六进制 #fff3cd，不是 RGB，所以 bg-warning bg-opacity-25 实际无效。
- 想用工具类，得先自定义 RGBA 类：
.bg-warning-rgba { background-color: rgba(255, 235, 205, 0.85); } - 或者干脆放弃工具类，直接写
background-color: rgba(...)更可控 - 高 DPI 屏幕下 alpha 值建议调高一点（比如
0.9），避免背景“发虚”
渐变背景时更要禁用 background-color
如果用了 linear-gradient()，必须显式写 background-color: transparent !important;，否则渐变和纯色背景会冲突，浏览器可能只渲染其中一个。
- 正确写法：
.alert-info { background: linear-gradient(to right, #d0ebff, #a5d8ff) !important; background-color: transparent !important; } - 方向用
to right或135deg，别写left to right（非法） - 至少两个色标，单色写法
linear-gradient(to bottom, #f8f9fa)不是渐变，是纯色
.alert-danger 搭配浅灰背景时，红色文字可能瞬间低于可读阈值，这种细节容易被跳过。
