css - Bootstrap 主题中的 Alpha channel 和不透明度

Question

我正在尝试将 Accordion 控件移植到 ui.bootstrap Accordion 。我在 ui.bootstrap 版本中处理的大多数元素都是 vanilla Bootstrap 中的面板类元素。

我已经创建(使用 theme customizer )css 来设置背景、边框和文本颜色，但我似乎无法在定制器中设置不透明度，而且当我手动设置它时它似乎没有效果CSS。

我对 Less 了解不多。由于我只是没有看到竞争或继承的样式，这些面板元素不支持不透明度吗？

在我的 css bootstrap 主题中，我尝试设置如下内容:

.panel-default > .panel-heading {
  color: #ffffff;
  background-color: #000000b3;
  border-color: #000000;
}

有关我要实现的目标的示例，请参见下文:

Answer 1

这里的问题是 8 digit hex正在使用颜色符号。

background-color: #000000b3;

虽然有 support在许多现代浏览器(不是 IE 或 Edge)中，这可能无法被 CSS 预处理器或某些 IDE 识别。

我建议您使用 RGBA 表示法作为替代或后备。

background-color: #000000b3; 
background-color: rgba(0,0,0,0.7)

可以在 Stack Overflow - Convert 8-digit hex colors to rgba colors? 上找到一个方便的转换器