如何更改引導程序中卡塊的不透明度4

嘿，我只是有一個簡單的Card Bootstrap 4組件。如何更改引導程序中卡塊的不透明度4

<div class="card"> 
    <div class="card-header">This is my header</div> 
    <div class="card-block">This is my block</div> 
    <div class="card-footer">This is my footer</div> 
</div>

我想實現是有頁眉和頁腳爲1的不透明度，但與.4一個不透明的塊。我試着在背景顏色風格來使用，RGBA沒有運氣

.card-block { background-color: rgba(245, 245, 245, 0.4); }

來源

2017-02-24 Luke Flournoy

你嘗試使用['opacity'（https://developer.mozilla.org/en-US/docs/Web/CSS/opacity） – happymacarts

原來的引導類.card是壓倒一切的背景不透明度的CSS樣式，我試圖在.card塊設置，無論我是否把！重要的關鍵字或沒有。

我能夠通過添加背景樣式的卡，只是改變了個人混濁的.card頭和來解決這個問題。卡尺爲1

.card { background-color: rgba(245, 245, 245, 0.4); } 
.card-header, .card-footer { opacity: 1}

來源

2017-02-24 18:09:17

你嘗試過使用opacity

.special-card { 
 
/* create a custom class so you 
 
    do not run into specificity issues 
 
    against bootstraps styles 
 
    which tends to work better than using !important 
 
    (future you will thank you later)*/ 
 

 
    background-color: rgba(245, 245, 245, 1); 
 
    opacity: .4; 
 
}

<div class="card"> 
 
    <div class="card-header">This is my header</div> 
 
    <div class="card-block special-card">This is my block</div> 
 
    <div class="card-footer">This is my footer</div> 
 
</div>

來源

2017-02-24 05:21:41 happymacarts

如果答案是有用的，並滿足您的需求，請接受。 – happymacarts

這是工作改變文字的不透明度，背景仍然是純白的，繼承自.card父div –

修改'background-color：rgba（245,245,245,1）;'調整爲需要。 – happymacarts

你的CSS看起來確定。我認爲這個問題是你的引導文件重寫你的代碼。試試這個重寫代碼，雖然我不會建議使用！重要

.card-block { background-color: rgba(245, 245, 245, 0.4) !important; }

參考this link爲壓倒一切的。其所謂的特異性

來源

2017-02-24 05:23:02

如何更改引導程序中卡塊的不透明度4

回答

相關問題