Html 当视口大小更改引导v4时更改导航栏颜色

我只是迁移到BootstrapV4。Im自定义初学者模板：

我希望

导航栏

透明，但当

视口

为

sm

和

xs

时，导航栏变暗

我试图使用断点更改它，并添加一个“navbar自定义”类，但我没有更改

html{
溢出：隐藏；
身高：100%；
}
身体{
垫面：5rem；
溢出：自动；
身高：100%；
背景：线性梯度（-45度，#E8D1E2，#7CC4FF，#FFECBD，#BF9BFA）；
背景大小：400%400%；
-webkit动画：渐变15s轻松无限；
-moz动画：渐变15s轻松无限；
动画：渐变15s轻松无限；
}
@-webkit关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@-moz关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
navbar先生{
边框顶部：2个实心#C66FF4；
宽度：100%
}
@介质（最小宽度：768px）{
导航。导航栏。导航栏自定义{
背景：rgba（0,0,0,0）；
}
}
.初学者模板{
填充物：3雷姆1.5雷姆；
文本对齐：居中；
}

兰多伍德说：欢迎！








引导启动程序模板
将此文档用作快速启动任何新项目的一种方式。
您得到的只是此文本和一个基本上没有内容的HTML文档
window.jQuery | | document.write（“”）

您正在您的

中使用Bootstrap的

.bg dark

类。此类的CSS声明为：

.bg-dark {
    background-color: #343a40!important;
}

---

因此，不允许覆盖“背景色”属性。要更改特定屏幕断点处的背景色属性，请使用Javascript或Jquery删除

.bg dark

类，并添加更改

背景色属性的自定义类。我希望我的解释对您来说很清楚。

在引导主题覆盖中使用SCS很容易：

.bg-dark {
    background-color: #343a40;
    @include media-breakpoint-up(sm) {
        background-color: transparent;
    }
}

---

我测试了你的代码。通过删除“.bg dark”，您的导航变得透明。这就是你想要的，对吗？还有其他的方法可以使用CSS3和html来实现吗？/是的，我想在md和屏幕大小以上的设备中保持透明。在xs设备中，我想将其更改为bg-dark.Solved！我使用断点和.navbar{background color}更改了它