如何在引导程序 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，但块的不透明度为 0.4。我尝试在背景色样式中使用 rbga 没有运气

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

原文由 Luke Flournoy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

我可以通过将背景样式添加到卡片并仅更改 .card-header 和 .card-header 的各个 不透明度 来解决此问题。 卡片页脚 为 1。

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

原文由 Luke Flournoy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 happymacarts 发布，翻译遵循 CC BY-SA 3.0 许可协议