CSS 如何在引导程序 4 中更改卡片块的不透明度

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

提问by Luke Flournoy

Hey I just have a simple Card Bootstrap 4 component.

嘿，我只有一个简单的 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>

What I wanted to accomplish was to have the header and footer with a opacity of 1 but the block with a opacity of .4. I tried to use rbga in the background-color style with no luck

我想要完成的是让页眉和页脚的不透明度为 1，而块的不透明度为 0.4。我尝试在背景颜色样式中使用 rbga ，但没有运气

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

采纳答案by Luke Flournoy

Turns out the bootstrap class .cardwas overriding the background opacity css style I was trying to set on .card-blockregardless of whether I put !important keyword or not.

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

I was able to fix this by adding the background style to the card and just changing the individual opacitiesof the .card-headerand .card-footerto 1.

我能够通过添加背景样式的卡，只是改变了个人来解决这个混浊的的.card头和。卡片页脚为 1。

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

回答by happymacarts

have you tried using opacity

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

回答by Jorge Opazo

please, try this:

请试试这个：

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

回答by Malcolm Vaz

Your css looks ok. I think the issue is your bootstrap file is overriding your code. Try this to override the code although I wont suggest using !important

你的 css 看起来不错。我认为问题是您的引导程序文件覆盖了您的代码。虽然我不建议使用 !important ，但试试这个来覆盖代码

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

Refer to this linkfor the overriding. Its called specificity

有关覆盖，请参阅此链接。它被称为特异性

回答by Developer

Try this approach

试试这个方法

HTML

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

CSS

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

回答by jayenne

opacity is different to the background-color opacity will set the translucency of the element and background-color will set it only for th colour of the background.

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

This may sound similar but they are very different.

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

The big diff is that opacity will make the text adn images and child elements also transplucent but the background-color will only affect the col...oh, you get it ;)

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

回答by codeherlife

Here's what has worked with me (using custom sass variables I created) to modify background colors, etc within the accordion:

这是对我有用的（使用我创建的自定义 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);
}