Bootstrap transparent panel css background: rgba не станет прозрачным

Question

Я хочу сделать панель прозрачности bootstrap по умолчанию прозрачной и попробовал ее с ответом, который я нашел здесь (Transparent Bootstrap Panel), добавив следующий код в мою таблицу стилей, а затем добавив panel-transparent класс моей панели.

CSS:

.panel-transparent { 
 
\t background: none; 
 
} 
 
.panel-transparent .panel-heading { 
 
\t background: rgba(122, 130, 136, 0.2)!important; 
 
} 
 
.panel-transparent .panel-body { 
 
\t background: rgba(46, 51, 56, 0.2)!important; 
 
} 
 
.panel { 
 
\t margin-bottom: 20px; 
 
\t background-color: #fff; 
 
\t border: 1px solid transparent; 
 
\t border-radius: 4px; 
 
\t -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
      box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 
.panel-body { 
 
\t padding: 15px; 
 
} 
 
.panel-heading { 
 
\t padding: 10px 15px; 
 
\t border-bottom: 1px solid transparent; 
 
\t border-top-left-radius: 3px; 
 
\t 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>

Как-то панель получает желаемый цвет, но это не transparen t и я не знаю, что я делаю неправильно.

Смотрите здесь: https://jsfiddle.net/ktLypzgr/

Решение:

Если бы мои Stylesheets связаны в неправильном порядке, так что они получили переписаны!

Иногда это так просто, как это ... Спасибо за помощь!

Answer 1

.panel-transparent { background: none; }

удаляет только background-image свойство. Также добавьте transparent после значения none.

Answer 2

попробовать этот

проверить 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>