ブートストラップ透明パネルCSSの背景：rgbaが透明にならない

Question

ブートストラップのデフォルトパネルを透明にして、ここで見つけた答えで試してみよう（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ていません私は何が間違っているのか分かりません。

はこちらをご覧ください：https://jsfiddle.net/ktLypzgr/

ソリューション：彼らは上書きされてしまったよう

は、私のスタイルシートが間違った順序でリンクしていました！

時には、このように簡単です... あなたの助けてくれてありがとう！

Answer 1

.panel-transparent { background: none; }

のみbackground-imageプロパティを削除します。また、none値の後にtransparentを追加します。

Answer 2

があなたのコードを共有してください。この

チェックデモ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>