背景透明不起作用

Question

你能看看这个演示，让我知道为什么background-color: transparent; 在引导面板主体上不起作用？

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

Answer 1

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

这是正在运行的示例：

这是示例：

<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>

我写了内联 CSS 只是为了展示。但不要使用它。 要使永久效果导航到您的引导 CSS 文件并更改此行

.panel{
    background-color:#fff;
  }

对这个

 .panel{
    background-color:transparent;
  }

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

Answer 2

此外，永远不要忘记使用.important。

background-color:transparent !important;