bootstrap 5.3+ 的 .btn-close 图标需用 !important 覆盖 background-image 并重置 filter: none、background-size: 1em；推荐 ::before 伪元素方案，配合 currentcolor 和绝对定位居中，同时补全 :hover、:disabled、:focus 状态样式及 alert 内垂直居中逻辑。
直接改 color 或 font-size 基本无效——bootstrap 5.3+ 的 .btn-close 是靠 background-image 渲染 svg 图标，不是文字。
为什么 background-image 覆盖不生效
原生 CSS 里写的是 background-image: url("data:image/svg+xml,...") !important，还附带 filter: invert(1) opacity(.5)。你只写 .btn-close { background-image: url(...); }，会被原生规则压制。
- 必须加
!important才能覆盖，比如：.btn-close { background-image: url("data:image/svg+xml,%3Csvg...%3E") !important; } - 必须同步重置
filter: none，否则新图标发灰或完全不可见 - 记得设
background-size: 1em，不然图标可能被裁剪或缩放失真 - 如果用 PNG，还得手动加
width和height（如1.25em），否则容器太小
用 ::before 伪元素替换更可靠
绕过 background-image 冲突最稳的方式：清空背景，用伪元素插入内容。它天然规避 filter 干扰，也更容易适配暗色模式。
- 先禁用原生样式：
.btn-close { background: none; padding: 0; } - 再用
::before插入字符：.btn-close::before { content: "×"; font-size: 1.5rem; line-height: 1; color: currentColor; } - 必须加定位居中：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 别用硬编码颜色，
currentColor能自动继承文本色，适配主题切换
悬停和禁用状态样式要单独补全
Bootstrap 对 :hover、:disabled 等状态写了独立规则，只改默认态，状态样式还是走原生逻辑——结果就是鼠标悬停时图标变灰、点击无反馈。
- 必须显式覆盖：
.btn-close:hover { opacity: .75; }、.btn-close:disabled { opacity: .25; } - 如果用了伪元素方案，也要给
.btn-close:hover::before单独设color或opacity - 别漏掉
:focus，否则键盘用户无法看到焦点状态
按钮“飘”在 Alert 上方？垂直居中不能靠固定 top
原生用的是 top: 1rem; right: 1rem，当 Alert 内容变多、行高增加时，按钮就悬在视觉中心上方，尤其在移动端明显。
- 改成
top: 50%; transform: translateY(-50%)实现真正垂直居中 - 确保父容器
.alert有position: relative（Bootstrap 默认有，但容易被覆盖） - 横向保持
right: 1rem即可，避免用left或transform: translateX引入 RTL 兼容问题 - 如果 Alert 高度变化剧烈，考虑配合
min-height和padding控制基线稳定性
最容易被忽略的其实是 filter: none 和状态伪类覆盖——这两处一缺，图标要么看不见，要么 hover 时颜色不对；而居中逻辑一旦写成固定像素，响应式下就会立刻露馅。
