求助：无法修改Bootstrap模态框关闭按钮的×颜色

问题原因 #

Bootstrap 5的.btn-close组件的“×”并非文字，而是通过background-image加载的SVG图标实现的，因此直接设置color属性无法改变图标颜色。你设置background-color生效，说明自定义类.m-close已被正确应用，只是属性选择错误。

解决方案 #

提供两种实用方法修改图标颜色：

方法1：替换SVG背景图（精准控制颜色）

直接修改background-image中的SVG填充色，将默认深色图标替换为白色：

.m-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  font-size: 2rem; /* 保持你需要的大小 */
}

注：%23fff是白色#fff的URL编码格式。

方法2：使用CSS滤镜（快速反转颜色）

通过filter属性反转图标颜色，适合从深色转为浅色场景：

.m-close {
  filter: invert(1) brightness(100%);
  font-size: 2rem;
}

优先级强化（可选）

如果上述样式仍不生效，可通过提高选择器优先级确保覆盖Bootstrap默认样式：

.btn-close.m-close {
  filter: invert(1) brightness(100%);
  font-size: 2rem;
}

内容的提问来源于stack exchange，提问作者heaholahorse