如何在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

请试试这个：

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

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

我能够通过向卡添加背景样式并将.card-header和.card-footer的单个不透明度更改为1来解决此问题。

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

Answer 4

你的CSS看起来不错。我认为问题是你的bootstrap文件覆盖了你的代码。尝试这个覆盖代码虽然我不建议使用！important

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

有关覆盖，请参阅this link。它被称为特异性

Answer 5

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

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

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

Answer 6

试试这种方法

HTML

<div class="card text-white bg-success mb-3 mt-4" style= "">
    <div class="card-header">Пользователь</div>
    <div class="card-body special-card" style="">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-primary mb-3" style=" ">
    <div class="card-header">Привязанный профиль персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Secondary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-danger mb-3" style=" ">
    <div class="card-header">Права доступа профиля персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

CSS

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

Answer 7

以下是我使用的方法（使用我创建的自定义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);
}