Bootstrap透明面板css背景：rgba不會透明

我想使默認面板的bootstrap透明，並試着用我在這裏找到的答案（Transparent Bootstrap Panel），將以下代碼添加到我的樣式表中，然後添加panel-transparent班到我的面板。Bootstrap透明面板css背景：rgba不會透明

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/

解決方案：

曾在一個錯誤的順序鏈接我的樣式，使他們得到了覆蓋！

有時它像這樣簡單... 感謝您的幫助！

來源

2016-09-27 Nostix

請分享你的代碼.. –

@dhavalraythatha ..did – Nostix

請出示_testable_代碼。這是客戶端問題，所以任何服務器端代碼都不感興趣。刪除任何PHP，並顯示測試該程序所需的_complete_ HTML代碼 - 最好在某處在線。 [mcve] – CBroe

.panel-transparent { background: none; }

只刪除background-image屬性。 none之後還加transparent值。

來源

2016-09-27 10:41:45 n1kkou

也沒有完成它的工作... – Nostix

然後你的風格被其他一些繼承風格所覆蓋。 – n1kkou

您的'.panel'規則會覆蓋'.panel-transparent'類，因爲它是在透明類之後聲明的。 – n1kkou

試試這個

檢查演示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>

來源

2016-09-27 10:42:08 ankit

可悲仍然不透明... – Nostix

請檢查更新的答案，並使rgba透明設置爲0的alpha值。 – ankit

Bootstrap透明面板css背景：rgba不會透明

回答

相關問題