css - 如何在 Bootstrap 中更改卡片背景颜色

Question

我想在 bootstrap 中将卡片的背景颜色从正常颜色或 "bg-primary" 更改为 rgba 我选择的颜色。

card {
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 0px 20px 0 rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.2);
    transition: 0.3s;
 }

Answer 1

首先 - 您使用了 card 而不是 .card 选择器。如果您想为 .card 设置自己的 background-color，您应该删除 .bg-primary 类并为 设置规则。卡片:

.card {
    ...
    background-color: rgba(0, 0, 0, 0.2);
    ...
}

其次 - 在 bootrstrap 4 中 .bg-primary 的 background-color 是用 !important 声明的，因此它会覆盖任何其他声明:

.bg-primary {
    background-color: #007bff!important;
}

您可以将自己的类添加到 .card:

.bg-custom-1 {
    background-color: rgba(0, 0, 0, 0.2);
}

或者，如果您仍然想使用它，您可以为 .bg-primary 设置颜色(确保您的 css 在 bootstrap css 之后):

.bg-primary {
    background-color: rgba(0, 0, 0, 0.2)!important;
}