背景透明不起作用

Question

Can you please take a look at this demo and let me know why the CSS rules of background-color: transparent; are not functioning on bootstrap panel body?

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

Answer 1

Because you are not applying the CSS in right place. You should apply your background transparent in <div> having class pannel Default .

Here is the running Example:

Here is the 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>

I have written Inline CSS just for example to show.But don't go with it. To make permanent effect navigate to your bootstrap CSS file and change this line

.panel{
    background-color:#fff;
  }

to this one

 .panel{
    background-color:transparent;
  }

It will make all your panel's background transparent.

Answer 2

Also, never, ever forget to use.important.

background-color:transparent !important;