Question

我正在尝试在我的网站中获得一个扩展的导航，如下所示：

<nav class="nav-extended">
  <div class="nav-wrapper">

    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="https://www.instagram.com/?hl=nl"><i class="fab fa-instagram"></i></a></li>
      <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="https://plus.google.com/discover"><i class="fab fa-google-plus-g"></i></a></li>
      <li><a href="https://twitter.com/?lang=nl"><i class="fab fa-twitter"></i></a></li>
    </ul>
  </div>

  <div class="nav-content">
    <ul class="tabs tabs-transparent">
      <li class="tab"><a href="#">contact us</a></li>
      <li class="tab"><a href="#">blog</a></li>
      <li class="tab"><a href="#">pages</a></li>
      <li class="tab"><a href="#">service</a></li>
      <li class="tab"><a href="#">about us</a></li>
      <li class="tab"><a href="#">home</a></li>
    </ul>
  </div>
</nav>

在此导航中，我试图删除图标所在的上部背景。我无法删除Materialise中的标准红色背景。

这是我在CSS中尝试过的方法：

background-color: none (!important);
background-color: rgba (0, 0, 0, 0);
opacity

Answer 1

删除第二个背景色，并删除！important周围的括号。

background-color: none !important;

Answer 2

默认的红色背景是从nav元素继承的。因此，要覆盖它，请为您的nav-wrapper类添加颜色，例如

background-color: white;

而且，background-color：none是无效选项。即使您添加透明的背景色，它也将显示父容器的红色。

PS：请尽可能在问题中添加jsfiddle或codePen。

Answer 3

在嵌入式CSS中使用background:transparent

    <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="https://www.instagram.com/?hl=nl"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="https://plus.google.com/discover"><i class="fab fa-google-plus-g"></i></a></li>
        <li><a href="https://twitter.com/?lang=nl"><i class="fab fa-twitter"></i></a></li>
    </ul>
 </div>

<div class="nav-content">
    <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#">contact us</a></li>
        <li class="tab"><a href="#">blog</a></li>
        <li class="tab"><a href="#">pages</a></li>
        <li class="tab"><a href="#">service</a></li>
        <li class="tab"><a href="#">about us</a></li>
        <li class="tab"><a href="#">home</a></li>
    </ul>
</div>

Answer 4

您可以在此background-color: transparent的帮助下删除背景或使其透明。您可以检入materialize.css文件中的默认属性，如果要更改，则可以根据需要override进行更改。

<head>
<style>
    nav {
        background-color: transparent;
    }

    body {
        background-image: url('./LRNHBJ.jpg');
        background-size: cover;
    }
</style>
</head>
<body>

<nav>

    <div class="nav-wrapper container">
        <a href="#" class="brand-logo black-text">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
                <a class="black-text" href="sass.html">Sass</a>
            </li>
            <li>
                <a class="black-text" href="badges.html">Components</a>
            </li>
            <li>
                <a class="black-text" href="collapsible.html">JavaScript</a>
            </li>
        </ul>
    </div>
</nav>
</body>

Materialize.css导航部分：

透明导航栏（无背景色导航栏）

Answer 5

如果您正在使用实体化并且只想删除颜色，则可以使用实体化类：不适用透明

您的代码就是这样

<nav class="nav-extended N/A transparent">
  (...)
</nav>

如果您还想删除阴影，则可以使用实例化类 z-depth-0

所以您的代码将如下所示：

<nav class="nav-extended N/A transparent z-depth-0">
  (...)
</nav>

您可以在其他元素上使用这些类...请记住这一点

删除颜色：class="N/A transparent"

去除阴影：class="z-depth-0"

您可以在以下页面查看这些课程

物化删除导航背景

5 个答案: