Menu
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>
746
To change that opacity, override --bs-bg-opacity via custom styles or inline styles.
The opacity level describes the transparency level, where 1 is not transparent at all, . 5 is 50% visible, and 0 is completely transparent. Set the opacity of an element using . opacity-{value} utilities.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
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
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
