logo标签列表

Bootstrap 5 关闭按钮：如何轻松更改颜色？

cssbootstrap-5
9
随着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;
}

调整颜色方面，有一个.btn-close-white变体，使用CSS过滤器来反转颜色，但我想要一个特定的颜色。当包括原始SCSS文件时，您可以更新$btn-close-color变量来更改颜色。但是，在我们将CSS作为样式表链接包含的环境中，我无法更新SCSS。
我希望能够轻松更改“X”的颜色，最好以相对灵活的方式进行，就像之前可以继承颜色一样。 一些答案我发现建议不能用CSS样式化背景图像。我尝试使用CSS过滤器，但发现很难指定特定的颜色。还有其他方法可以使用吗？谢谢！
1
不如放弃背景图片，改为在伪元素上引入一个字符作为内容，您觉得怎么样？ - A Haworth
1
当然，我可以这样做，但那样我基本上就是绕过Bootstrap并创建自己的组件。我希望有一种方法可以使用Bootstrap文件，但修改图像颜色。 - ericgio
4个回答
5

不确定是否已经回答了这个问题，但是根据 Bootstrap 的建议，请尝试以下方法：

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

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
这个类是用来实现“暗黑模式”的“替代品”。在5.3版本中已经被弃用。现在需要使用data-bs-theme="dark"属性来实现相同的效果。更多细节请参考这里 - https://getbootstrap.com/docs/5.3/migration/#close-button - undefined
4
你可以使用类似这样的工具创建特定的颜色过滤器，或在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;
}

演示

4
生成新颜色（例如白色）的 SVG 字符串的方法是什么？ - Cody
1
@Cody，你可以用“%CODE”（其中CODE是你的颜色的RGB代码）来更改“fill”的值。 - Alexandre Gombert
2

根据您使用Bootstrap的方式，您可以直接更改变量$btn-close-color: $primary（例如）。

或者，如果您想要在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);
  }
}
或者，要为警告框的关闭按钮设置样式，请使用 .alert-#{color} .btn-close 作为选择器。 - Skeets
0

背景：透明 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; }

只需复制此内容并更改填充以适应您的颜色。 - Evans Sarpong
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接