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

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，而块的不透明度为 .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

您的 css 看起来不错。我认为问题是您的 bootstrap 文件覆盖了您的代码。试试这个来覆盖代码，尽管我不建议使用 !important

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

参考this link了解覆盖。其所谓特异性

Answer 3

原来 bootstrap class .card 覆盖了背景不透明度 css 我试图在 [=15] 上设置的样式=].card-block 无论我是否放置 !important 关键字。

我能够通过向卡片添加背景样式并仅更改 .card-header[=20= 的单个 opacities 来解决此问题] 和 .卡片页脚到 1.

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

Answer 4

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

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

最大的区别是不透明度会使文本和图像和子元素也变得半透明，但背景颜色只会影响颜色...哦，你明白了 ;)

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

请试试这个：

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

试试这个方法

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 8

在 Bootstrap 4 中，您可以在 class 中键入“opacity-50”，这意味着 opacity:0.5 在 css 中无需键入任何 css 代码和“opacity-30”意思是 opacity:0.3 in css 等...

`<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 中更改卡片块的不透明度

How to change the opacity of a card-block in bootstrap 4

css

twitter-bootstrap

opacity

bootstrap-4

twitter-bootstrap-4