时间戳

首页 > 解决方案 > 实现删除导航背景

html - 实现删除导航背景

问题描述

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

<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>

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

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

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

标签： htmlcssmaterialize

解决方案

如果您正在使用物化并且只想删除颜色，您可以使用物化类：N/A transparent

你的代码会是这样的

<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"

您可以在

推荐阅读