<分区>
我想使 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/
解决方案:
我的样式表链接顺序错误,以至于它们被覆盖了!
有时候就是这么简单... 感谢您的帮助!