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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

我能够通过向卡中添加背景样式并仅更改 .card-header 和。卡的单个 opacities 来解决此问题。页脚到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>

Answer 4

不透明度与背景颜色不同不透明度将设置元素的半透明度，背景颜色将仅为背景颜色设置它。

这可能听起来很相似，但它们非常不同。

不同之处在于，不透明度会使文本和图像以及子元素也变得透明，但背景颜色只会影响col ...哦，你得到它;）

Answer 5

以下是与我合作的方法（使用我创建的自定义sass变量）来修改手风琴中的背景颜色等：

::ng-deep div.card-header:hover {
background-color: var(--subtle-gray);
}

::ng-deep div.card-header a {
background-color: var(--accent);
text-decoration: none !important;
}

::ng-deep div.card-body {
background-color: var(--subtle-gray);
}

Answer 6

在 Bootstrap 4 中，您可以在类中输入“opacity-50”，即 css 中的 opacity:0.5，无需输入任何 css 代码，“opacity-30”即 css 中的 opacity:0.3 等...

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

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

6 个答案: