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

Question

I want to make the default panel of bootstrap transparent and tried it with the answer i found here (Transparent Bootstrap Panel), by adding the following code to my stylesheet and then adding the panel-transparent class to my panel.

CSS:

.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;
}
.panel {
 margin-bottom: 20px;
 background-color: #fff;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
 padding: 15px;
}
.panel-heading {
 padding: 10px 15px;
 border-bottom: 1px solid transparent;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}

HTML:

<div class="panel panel-default panel-transparent">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <h3 id="fahrzeugwahlh3">Heading:</h3>
    <p id="fahrzeugwahltext">Text</p>
  </div>
</div>

Somehow the panel gets the desired color but it's not transparent and i don't know what i am doing wrong.

See here: https://jsfiddle.net/ktLypzgr/

Solution:

Had my Stylesheets linked in a wrong order, so that they got overwritten!

Sometimes its as simple as this... Thanks for your help!

Please show _testable_ code. This is a client-side problem, so any server-side code is uninteresting. Remove anything that is PHP, and show the _complete_ HTML code necessary to test this - preferably online somewhere. [mcve] — CBroe, Sep 27 '16 at 10:40
" See here: https://jsfiddle.net/ktLypzgr/ " — It **is** transparent. If you change the 0.2 to a 1 then it becomes darker because the white background is no longer visible through it. — Quentin, Sep 27 '16 at 10:57

score 1 · Accepted Answer · answered Sep 27 '16 at 10:41

1

.panel-transparent { background: none; }

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

answered Sep 27 '16 at 10:41

n1kkou

3,096
2
21
32

Also did not do its job... – Nostix Sep 27 '16 at 10:48
then your styles are overwritten by some other inherited styles. – n1kkou Sep 27 '16 at 10:53
Your `.panel` rules ar overwriting the `.panel-transparent` class, because it's declared after the transparent class. – n1kkou Sep 27 '16 at 10:56
THANKS! Had my Stylesheets linked in a wrong order so they would be overwritten! – Nostix Sep 27 '16 at 10:57

score 0 · Answer 2 · edited Sep 27 '16 at 12:27

0

try this

check demo here

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

<div class="panel panel-default panel-transparent">
  <div class="panel-heading">
    <?php showWebiscoWidget(KNR, 'Widget', array( 'layout'=>'layout')); ?>
  </div>
  <div class="panel-body">
    <h3 id="fahrzeugwahlh3">Heading:</h3>
    <p id="fahrzeugwahltext">Text</p>
    <?php showWebiscoWidget( KNR, 'Widget' ); ?>
  </div>
</div>

edited Sep 27 '16 at 12:27

chirag

1,761
1
17
33

answered Sep 27 '16 at 10:42

ankit

19
3

Sadly still not transparent... – Nostix Sep 27 '16 at 10:47
please check the updated answer and to make rgba transparent set alpha value to 0. – ankit Sep 27 '16 at 10:52

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

2 Answers2