Transparent Bootstrap Panel

Transparent Bootstrap Panel

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

Bootstrap .panel-heading opacity?

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

Bootstrap transparent panel css background: rgba won't get transparent

.panel-transparent {
background: none;
}

removes only the background-image property. Also add transparent after the none value.

Alpha channel and opacity in a Bootstrap theme

The issue here is the 8 digit hex color notation being used.

background-color: #000000b3;

Whilst there is support in maany modern browsers (not IE or Edge) this may not be recognised by CSS pre-processors or some IDEs.

I would suggest that you employ RGBA notation as an alternative or a fallback.

background-color: #000000b3; 
background-color: rgba(0,0,0,0.7)

A handy converter can be found right here on Stack Overflow - Convert 8-digit hex colors to rgba colors?

---

Related Topics