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

vngu2lb8 于 2022-12-24 发布在 Bootstrap

关注(0)|答案(3)|浏览(302)

随着v5的发布，Bootstrap更新了几个组件的样式，包括close button。在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;
}

在调整颜色方面，有一个.btn-close-white变量可以使用CSS过滤器反转颜色，但我需要一个特定的颜色。当包含原始SCSS文件时，您可以更新$btn-close-color变量来更改颜色。但是，我使用Bootstrap的环境中包含CSS作为样式表链接，因此无法更新SCSS。
我想很容易地改变“X”的颜色，理想的情况下，在一个相对灵活的方式，像以前的颜色可以继承。Some answers我发现建议，背景图像不能用CSS样式。我已经尝试使用CSS filters，但发现它很难指定一个特定的颜色。有没有其他的方法，我可以使用？谢谢！

css

来源：https://stackoverflow.com/questions/67597165/bootstrap-5-close-button-easy-way-to-change-color

3条答案

按热度按时间

uoifb46i1#

您可以使用tool like this创建特定的颜色过滤器，或者更改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;
}

Demo

赞(0）回复(0）举报 2022-12-24

deyfvvtc2#

根据您使用Bootstrap的方式，您可以直接更改变量$btn-close-color：$主要（例如）
或者，如果你想在html中写一些类似btn-close-primary的东西，你可以做一个mixin。

@mixin button-close-color($color) {
     $btn-close-bg:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$color}'><path 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'/></svg>");
     background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat;
    }

然后循环主题

@each $color, $value in $theme-colors {
  .btn-close-#{$color} {
    @include button-close-color($value);
  }
}

赞(0）回复(0）举报 2022-12-24

owfi6suc3#

不确定是否回答了这个问题，但根据Bootstrap，尝试以下操作：

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

赞(0）回复(0）举报 2022-12-24

我来回答

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

3条答案

相关问题

热门标签

最新问答