直接修改 background-color 为 rgba() 才生效，因 Bootstrap 的 .alert 类使用带 !important 的 background-color；禁用 opacity 以免文字图标变淡；需统一或按类型覆盖所有警示框，并同步调整文字色与边框色以保障可读性。
直接改 background-color 为 rgba() 才生效
bootstrap 的 .alert 类用的是 background-color（不是 background），且带 !important，所以写 .alert { background-color: rgba(255, 255, 255, 0.8); } 是唯一可靠起点。别用 opacity——它会让文字、图标、关闭按钮一起变淡，可读性崩坏。
常见错误是只改 .alert-warning 却漏掉其他类型（如 .alert-danger），结果只有黄色警告框透明，红色的还是实心。建议统一覆盖：
.alert { background-color: rgba(255, 255, 255, 0.9) !important; }- 若需差异化，按类型写：
.alert-success { background-color: rgba(224, 247, 224, 0.85) !important; } - 必须加
!important，否则 Bootstrap 原始规则权重更高
border-width 必须用自定义 CSS 覆盖
Bootstrap 的 .alert 边框是写死在 CSS 里的，比如 .alert-info { border: 1px solid #bee5eb; }，没有 .border-2 这类工具类可用。想加粗边框，只能重写 border-width：
-
.alert { border-width: 2px !important; }（全局统一） -
.alert-danger { border-width: 3px !important; }（仅错误提示加粗） - 千万别写
border: 2px solid #dc3545——它会覆盖掉原生的border-color和border-style，导致颜色错乱或圆角丢失 - 高 DPI 屏幕下 2px 可能过粗，可配合媒体查询降级：
@media (min-resolution: 1.25dppx) { .alert { border-width: 1.5px !important; } }
透明背景下文字和边框颜色必须同步调整
原生 .alert-warning 的文字色 #856404 是按不透明背景设计的，换成 rgba(255, 255, 255, 0.9) 后对比度暴跌，尤其在阳光直射的手机屏幕上几乎不可读。
- 必须同时重设
color和border-color：.alert-warning { color: #5a4a04 !important; border-color: #ffc107 !important; } - 推荐用 WebAIM Contrast Checker 校验，文本与背景最低要达 4.5:1
- 边框别省略——透明背景会让警示框边缘“融化”，一道清晰的实色边框（哪怕只是
1px）能立刻提升辨识度 - 如果用了渐变背景（
background: linear-gradient(...)），更要禁用background-color，否则两者冲突
加载顺序和选择器权重是隐形关键点
写了 CSS 却没生效？大概率是样式表引入顺序错了。Bootstrap 的 CSS 必须在你自定义样式之前加载，否则 !important 也赢不了。
- 检查 HTML 中
<link>标签顺序：bootstrap.min.css→ 你的custom.css - 避免用太泛的选择器，比如只写
.alert在某些定制版 Bootstrap 里可能被更具体的选择器（如.alert.alert-warning）压制，必要时加权：.alert.alert-warning { ... } - 浏览器开发者工具里看 “Computed” 面板，确认
background-color和border-width是否真被应用，而不是被 strike-through
rgba() 代替 opacity、border-width 单独调、文字色跟着背景动态校准、CSS 加载顺序不能错——少一个，就白调了。
