Bootstrap 主题中的 Alpha 通道和不透明度答案

【问题标题】：Alpha channel and opacity in a Bootstrap themeBootstrap 主题中的 Alpha 通道和不透明度
【发布时间】：2019-03-28 17:34:26
【问题描述】：

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

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

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

在我的 css 引导主题中，我尝试设置如下内容：

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

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

【问题讨论】：

【解决方案1】：

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

background-color: #000000b3;

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

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

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

【讨论】：