背景透明不工作

Question

你能看一下this demo，让我知道为什么CSS的规则 background-color: transparent;在bootstrap面板主体上无法正常工作？

#collapseOne .panel-body { background-color: transparent; }
.panel-body { background-color: transparent; }

Answer 1

因为您没有在正确的位置应用CSS。 您应该在<div> pannel Default {。}}中将您的背景应用于透明。

Here is the running Example:

以下是示例：

<div class="panel panel-default" style='background:transparent'>
<div class="panel-heading" role="tab" id="headingOne">
  <h4 class="panel-title">
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>
</div>

我已经编写了Inline CSS，例如show.But不要使用它。 要使永久效果导航到您的bootstrap CSS文件并更改此行

.panel{
    background-color:#fff;
  }

到这个

 .panel{
    background-color:transparent;
  }

它会使您所有面板的背景透明。