Bootstrap透明面板css背景：rgba不会透明[关闭]

Question

我想让引导程序的默认面板透明并尝试使用我在此处找到的答案 (Transparent Bootstrap Panel)，方法是将以下代码添加到我的样式表中，然后将 panel-transparent 类添加到我的面板中。

CSS：

.panel-transparent {
	background: none;
}
.panel-transparent .panel-heading {
	background: rgba(122, 130, 136, 0.2)!important;
}
.panel-transparent .panel-body {
	background: rgba(46, 51, 56, 0.2)!important;
}
.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
	padding: 15px;
}
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

HTML：

<div class="panel panel-default panel-transparent">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <h3 id="fahrzeugwahlh3">Heading:</h3>
    <p id="fahrzeugwahltext">Text</p>
  </div>
</div>

面板以某种方式获得了所需的颜色，但它不透明，我不知道我做错了什么。

请看这里：https://jsfiddle.net/ktLypzgr/

解决方案：

我的样式表以错误的顺序链接，所以它们被覆盖了！

有时候就这么简单... 感谢您的帮助！

Answer 1

试试这个

查看演示here

body {
  background: red;
}
.panel-transparent {
  background: transparent;
}
.panel-transparent .panel-heading {
  background: rgba(122, 130, 136, 0.2)!important;
}
.panel-transparent .panel-body {
  background: transparent;
}

<div class="panel panel-default panel-transparent">
  <div class="panel-heading">
    <?php showWebiscoWidget(KNR, 'Widget', array( 'layout'=>'layout')); ?>
  </div>
  <div class="panel-body">
    <h3 id="fahrzeugwahlh3">Heading:</h3>
    <p id="fahrzeugwahltext">Text</p>
    <?php showWebiscoWidget( KNR, 'Widget' ); ?>
  </div>
</div>

Answer 2

.panel-transparent { background: none; }

仅删除 background-image 属性。还要在none 值之后添加transparent。