Mjukis Mjukis - 1 month ago 9
CSS Question

Bootstrap ".panel-heading" opacity?

So, i'm trying to set the Bootstrap Panel-Heading to be transparent.

Because of the z-index i cannot figure out how to do it.


The panel-heading is on-top of panel-default.

HTML

<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
</div>


CSS

.panel-default{
background: rgba(255, 255, 255, 0.9);
}
.panel-default .panel-heading{
background: rgba(255, 255, 255, 0.0);
}
.panel-default .panel-body{
background: rgba(255, 255, 255, 0.95);
}


I've tried to make the whole panel (panel-default) transparent,

and then gave the body a white color. Problem here is that the panel-body isn't cover the whole space below the heading. I just got a white area where i have some content/text.

If i make the panel-default solid white, i cannot "get thru" it with transparent panel-heading. Because the heading is on-top of the panel-default.

UPDATE

So my problem is that i'd like the heading to be transparent, but the body to be solid. AND the body to cover whole space below panel-heading.

EDIT

I tried to set height for panel-body to 100% but it's still not covering the whole space below panel-heading.

enter image description here

UPPDATE

The problem on the panel-body aint cover whole space was because i had set the panel-default height. I should had set the panel-body height instead!

Answer

Use below CSS , may be it can be help to you.

CSS

.panel-default{
    background: transparent;
}
.panel-default .panel-heading{
    background: transparent;
}
.panel-default .panel-body{
   background: #fff;
}
Comments