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

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

第二个-在引导程序4中，{{1}中的background-color中的.bg-primary用!important声明，因此它会覆盖所有其他声明：

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

您可以将自己的课程添加到.card：

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

或者如果您仍想使用它，可以为.bg-primary设置颜色（确保CSS紧随引导CSS之后）：

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

Answer 2

您应该在CSS类名称中添加点，否则它将不起作用。像这样：

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

也许您也需要添加“！important”，但我不确定。