如何在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;
 }

- yousif fayed

Answer 1

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

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

在Bootstrap 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;
}

- fen1x

---

我尝试了第一个，但它没有起作用，即使我没有使用bg-primary也无法通过这种方式进行更改。我不知道为什么在使用card:hover时可以正常工作，但在.card上却不能。无论如何，感谢您的时间 :) - yousif fayed