18

I have picked this free bootstrap theme, and my problem is that I want to create transparent panels, but when I set opacity: 0.8; the text in the panel, of course, gets transparent, which is not something I would like to happen. I tried using this CSS code, but it looks like there is still something behind the heading and body and the panel doesn't become transparent.

.panel-transparent .panel-heading{
    background: rgba(122, 130, 136, 0.2)!important;
}

.panel-transparent .panel-body{
    background: rgba(46, 51, 56, 0.2)!important;
}

Sample HTML:

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
ggorlen
  • 44,755
  • 7
  • 76
  • 106
Boyan Hristov
  • 1,067
  • 3
  • 15
  • 41

3 Answers3

29

CSS

    body {
        background:#c33;
    }

    .panel-transparent {
        background: none;
    }

    .panel-transparent .panel-heading{
        background: rgba(122, 130, 136, 0.2)!important;
    }

    .panel-transparent .panel-body{
        background: rgba(46, 51, 56, 0.2)!important;
    }

HTML

<div class="panel panel-primary panel-transparent">
  <div class="panel-heading">
    <h3 class="panel-title">Panel primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Example

user3212461
  • 433
  • 4
  • 7
  • You could also add the footer in case in the future you are going to use it! `.panel-transparent .panel-footer{ background: rgba(46, 51, 56, 0.2)!important; }` – auslander Apr 24 '15 at 06:28
2
.transparent{    
    background-color: rgba(0,0,0,0.15);
}

.panel{
    background-color: transparent;
    border: 1px #222;
}

<div class="panel panel-default">
     <div class="panel-heading">Título</div>
     <div class="panel-body transparent">                  
     </div>
</div>
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Cristhian Carreño
  • 128
  • 1
  • 4
1

Simply go for "bg-transparent" as mentioned in the link above; https://getbootstrap.com/docs/4.1/utilities/colors/

Such;

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title bg-transparent text-dark">Panel primary</h3>
  </div>
  <div class="panel-body bg-transparent text-white">
    Panel content
  </div>
</div>

And definitely be sure not to forget adding bootstrap.

akinov
  • 65
  • 2
  • 12
  • This is a borderline [link-only answer](//meta.stackexchange.com/q/8231). You should expand your answer to include as much information here, and use the link only for reference. – Blue Aug 13 '18 at 23:30