Html 我的引导导航栏是白色的？但是我想要一个透明的导航栏

有人能帮我找到为什么我不能将导航栏更改为透明的解决方案吗

我的引导导航栏是白色的，但我希望它是透明的-我希望我的导航栏是它下面的旗帜图像的颜色。但即使我使用！重要的是它仍然是白色的吗？请帮我去掉导航栏的背景色

我的导航栏

我的HTML

<header id="header">
<nav class="navbar navbar-expand-lg px-4">
    <a href="#" class="navbar-brand">
    <img src="img/logo4.png" alt="main icon">
    </a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
        <span class="toggler-icon">
        <i class="fas fa-bars"></i>
        </span>
        </button>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="navbar-nav text-capitalize mx-auto">
            <li class="nav-item active">
            <a href="#header" class="nav-link"> home</a>
            </li>
            <li class="nav-item active">
            <a href="#about" class="nav-link"> about</a>
            </li>
            <li class="nav-item active">
            <a href="#store" class="nav-link"> store</a>
            </li>
            <li class="nav-item active">
            <a href="#footer-title" class="nav-link"> contact</a>
            </li>
        </ul>
        
        <div class="nav-info-items d-none d-lg-flex">
            <!-- phone number -->
            <div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
                <span class="info-icon mx-lg-3">
                <i class="fas fa-phone"></i>
                </span>
                <p class="mb-0">+ 27 (84) 836 1281 </p>
            </div>
            <!--  end of phone number   -->
<!-- cart -->
            <div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content- 
   between mx-lg-5">
            <span class="cart-info_icon mr-lg-3">
                <i class="fas fa-shopping-cart"></i>
                </span>
                <p class="mb-0 text-capitalize">cart</p>
                
                
            </div>
            
        </div>
    </div>
    </nav>

---

在导航栏中使用“不透明度效果”或“背景rgba”

将css更改为：

.navbar {
background-color: rgba(0, 0, 0, 0.0);
}

这意味着： 将背景色设置为黑色，不透明度设置为0%==透明

参考：

---

这看起来像是DOM Inspector/Developer Toolkit/浏览器中的任何调用的工作

我将编写一种通用的方法来查找具有白色背景的元素，而不是将代码与引导默认样式结合起来检查

首先，您需要了解“inspect元素”功能（至少在Chrome和Firefox中可用）。右键单击任何页面元素（例如，导航栏）应提供类似“检查”或“检查元素”的选项。用这个。开发者控制台将打开并高亮显示您在HTML视图中单击的元素堆栈中最前面的元素。（或者，您可以按Ctrl-Shift-I或F12，然后使用开发人员控制台左上角的箭头图标选择元素。）

其次，如果高亮显示某个元素，开发人员控制台的“规则”或“样式”选项卡将显示应用于该元素的所有规则。还有一个“Computed”选项卡，用于显示应用于该元素的所有规则的最终结果。在这些选项卡之间，检查是否有任何背景规则设置为非透明

第三，如果您没有找到使导航栏变为白色的背景规则，请检查所有父元素的背景规则。背景可能被设置为外部div或header；它们可能大小相同！将鼠标悬停在HTML视图中的某个元素上，也会突出显示页面中的该元素：这样，您可以找到与导航栏大小相同的所有元素

找到元素后，切换回“规则”选项卡：在那里您可以动态编辑CSS，只是为了尝试哪条规则对您有帮助

这可能还不够：可能是您的标题（包括导航栏）将内容向下推；而您希望在导航栏下显示的背景图像可能只应用于content div。在这种情况下，您可能需要将该背景图像应用于正文，而不是内容再次使用规则选项卡应用背景颜色（我更喜欢使用非常花哨的颜色，它不会显示在页面的配色方案中的任何地方）到身体元素，看看它在哪里发光

不要忘记，动态更改规则并不是持久性的，当您重新加载或离开页面时，所有动态更改都将丢失。我建议经常使用开发人员控制台，只是为了体验一下它的使用。它是回答您提出的问题的一个非常宝贵的工具，但需要一些学习和修改才能正确地解释它。

您尝试过吗

<nav class="navbar navbar-expand-lg px-4" style="background-color: transparent">

打开Chrome中的DevTools，首先调查哪些元素绘制了白色背景。然后你可以用css将它作为目标，并将其explizit设置为transparent.Bootstrap。你必须有其他影响背景颜色的CSS。非常感谢你的帮助。不过似乎什么都没用——我已经尝试了你所有的建议。导航栏似乎在响应样式体{background:var（--mainWhite）；}它会更改不同的颜色，但不会响应透明或透明opacity@Kate在本例中，您提到的“位于其下方的横幅图像”似乎并不在其下方；或者与导航栏的大小不匹配；或者它的父元素的高度为零；或者类似的。您可以尝试定位应该包含/显示您的横幅图像的元素，以查看该元素是否有效，以及是否具有正确的大小和位置（只需将鼠标悬停在该元素的HTML标记上，即可查看其大小和位置高亮显示）。@Kate开发人员控制台的“网络”选项卡还显示为您的页面加载的所有资源（您可能需要在该选项卡打开的情况下重新加载）--状态200为“OK”，状态为400左右表示加载文件（例如，您的横幅图像）时出现问题。可能只是您的横幅图像未加载（我无法从您的问题中看出您的“横幅图像”是否与页面背景图像不同）在这里，我可能不会告诉您一些新的内容，但在web开发中，文件名是用大写还是小写字符编写是有区别的。

<nav class="navbar navbar-expand-lg px-4" style="background-color: transparent">