Bootstrap 5 关闭按钮：更改颜色的简单方法？

Question

随着 v5 的发布，Bootstrap 更新了多个组件的样式，包括关闭按钮。在 v5 之前，“x”是可以轻松设置样式的文本，包括从父级继承颜色。然而现在，该按钮使用背景 SVG 图像进行样式设置：

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #000;
  background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
  border: 0;
  border-radius: .25rem;
  opacity: .5;
}

在调整颜色方面，有一种使用 CSS 过滤器反转颜色的.btn-close-white 变体，但我想要特定的颜色。包含原始 SCSS 文件时，您可以更新$btn-close-color变量以更改颜色。但是，我在将 CSS 作为样式表链接包含在内的环境中使用 Bootstrap，因此我无法更新 SCSS。

我想轻松地更改“X”的颜色，理想情况下以一种相对灵活的方式，就像以前可以继承颜色一样。我发现的一些答案表明背景图像不能使用 CSS 进行样式设置。我尝试过使用CSS 过滤器，但发现指定特定颜色非常困难。我还可以使用其他方法吗？谢谢！

Answer 1

您可以使用这样的工具来创建特定的滤色器，或者更改 SVG 中的填充颜色...

.btn-close-yellow {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fc0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

演示

Answer 2

不确定这是否已得到解答，但根据 Bootstrap 尝试以下操作：

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>