如何在bootstrap 4中更改卡块的不透明度

Question

嘿,我只有一个简单的Card Bootstrap 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的块.我尝试在背景颜色风格中使用rbga而没有运气

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

Answer 1

你试过用吗？ 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>

Answer 2

结果证明引导类.card覆盖了我试图在.card-block上设置的背景不透明度css样式，无论我是否放置 !important 关键字。

我能够通过添加背景样式的卡，只是改变了个人来解决这个混浊的的.card头和。卡片页脚为 1。

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

Answer 3

请尝试以下方法：

<div class="card-transparent">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card" style="background-color: rgba(245, 245, 245, 0.4); ">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>