背景透明不起作用

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;