直接覆盖 .btn-close 的 background-image 无效，因 Bootstrap 5.3+ 原生规则含 !important 和 filter: invert(1) opacity(.5)；须加 !important 并重置 filter: none、background-size 等，或改用 ::before 伪元素方案更可靠。
直接覆盖 .btn-close 的 background-image 为什么无效
Bootstrap 5.3+ 的 .btn-close 默认用 base64 编码的 SVG 作为 background-image，且原生 CSS 中带 !important 和 filter: invert(1) opacity(.5)。只写 .btn-close { background-image: url(...); } 不起作用，不是权重低，而是被原生规则压制。
- 必须加
!important才能覆盖原生background-image - 必须同步重置
filter: none，否则新图标会发灰或空白 -
background-size建议保持1em，避免在不同font-size下缩放失真 - 若用 PNG，需额外设
width和height（如1.25em），否则容器太小会裁切图标
用伪元素 ::before 或 ::after 替换图标更可靠
绕过 background-image 冲突最稳妥的方式是禁用背景图，改用伪元素渲染内容。这样不依赖 base64 编码，也天然规避 filter 干扰。
- 先清空原生样式：
.btn-close { background: none; padding: 0; } - 用
::before插入 Unicode ×：content: "×"; font-size: 1.5rem; line-height: 1; color: currentColor; - 必须加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);实现居中 - 推荐用
currentColor而非硬编码颜色，适配暗色模式和主题切换
.btn-close 悬停/禁用状态没变化？别忘了单独覆盖状态伪类
Bootstrap 对 :hover、:focus、:disabled 等状态写了独立规则，比如 .btn-close:hover。只改默认态，状态样式仍走原生逻辑。
- 必须显式写
.btn-close:hover::before { color: #dc3545; }等对应状态样式 - 如果用了
background-image方案，也要同步写.btn-close:hover { filter: none; } - 测试
:disabled时注意：Bootstrap 默认没给.btn-close:disabled加样式，需自行补全透明度或指针禁用
响应式下按钮“飘”出 Alert 顶部？垂直居中不能靠固定 top
原生 .btn-close 用 top: 1rem; right: 1rem; 定位，当 Alert 内容变多、行高增加时，按钮会悬在视觉中心上方，尤其在移动端。
- 把
.alert确保为position: relative（Bootstrap 默认有，但可能被覆盖） - 改用
top: 50%; transform: translateY(-50%)实现垂直居中 - 横向保留
right: 1rem或配合padding动态调整，避免窄屏溢出 - 别忽略
font-size影响：SVG 图标缩放由font-size控制，改它会连带改变图标大小
实际改起来最常漏的是 filter: none 和状态伪类覆盖——这两处一缺，图标要么看不见，要么 hover 时颜色不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
