Question

我想让bootstrap的默认面板透明，并使用我在这里找到的答案（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

.panel-transparent { background: none; }

仅删除background-image属性。另请在transparent值后添加none。

Answer 2

试试这个

检查演示 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>

Bootstrap透明面板css背景：rgba不会透明

2 个答案: