如何在引导程序中更改卡片背景颜色

Question

我想将引导程序中卡片的背景颜色从正常颜色或“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选择器。如果你想设置你自己的background-color，.card你应该删除.bg-primary类并设置规则.card：

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

其次 - 在 bootrstrap 4 background-colorof.bg-primary中声明为!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;
}