如何在Bootstrap 4中更改card-block的不透明度

Question

嘿，我刚刚有一个简单的 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。我尝试在background-color样式中使用RGBA，但没有成功。

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

- Luke Flournoy

---

你尝试过使用 opacity 吗？ - happymacarts

你是否可以尝试使用上面链接中提到的 "bg-transparent" 来解决你的问题？ - akinov

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>

- happymacarts

---

如果答案有用且符合您的需求，请接受并仅返回翻译后的文本。 - happymacarts

这段代码可以改变文本的不透明度，但背景仍然是纯白色，继承自.card父级div。 - Luke Flournoy

将 background-color: rgba(245, 245, 245, 1); 进行修改以根据需要进行调整。 - happymacarts

happymacarts，我爱你：P 谢谢！ - Sergo

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>

- Jorge Opazo

---

完美！这正是我所寻找的！ - Robert Saylor

Answer 3

原来，bootstrap类.card无论我是否使用!important关键字都会覆盖我试图在.card-block上设置的背景透明度CSS样式。我通过将背景样式添加到卡片中并只更改.card-header和.card-footer的透明度为1来解决了这个问题。

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

- Luke Flournoy

Answer 4

尝试这个方法 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;
        }

- NoWar

Answer 5

你的CSS看起来没问题。我认为问题在于你的Bootstrap文件正在覆盖你的代码。尝试使用以下方法覆盖代码，虽然我不建议使用!important。

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

请参考这个链接进行覆盖。它被称为特异性。

- Malcolm Vaz

Answer 6

不透明度和背景色是不同的。

不透明度将设置元素的半透明度，而背景颜色仅设置背景颜色的半透明度。

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

最大的区别在于，不透明度会使文本、图像和子元素也变为半透明，但背景颜色仅影响颜色...噢，你知道的；）

- jayenne

---

请添加一些代码，以便其他用户可以测试您所描述的内容。谢谢！ - Ignacio Ara

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

- codeherlife

Answer 8

在Bootstrap 4中，您可以在类中键入“opacity-50”，这意味着在CSS中的不透明度为0.5，而无需键入任何CSS代码，而“opacity-30”则表示在CSS中的不透明度为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>`

- Abdallah Labib

---

这不正确。自Bootstrap 5.1以来，这是可能的，请参阅此链接。 - Philipp Palmtag