Question

代码：style.css

.nav-links .navbar-inverse {
  background-color: #b8e5fa;
  border: none;
  height: 100px;
  opacity: 0.5;
}

在这段代码中，我有导航菜单，正如我在css中提到的那样，我正在提供背景颜色。现在，我想用相同的颜色代码使我的背景颜色透明。我怎样才能做到这一点？请帮帮我。

谢谢！

Answer 1

使用rgba()指定不透明度的颜色。

background-color : rgba(184, 229, 250, 0.5);

我在这里使用了#b8e5fa的RGB和0.5的不透明度。

以下是一个例子：

.navbar-inverse {
    background-color : rgba(184, 229, 250, 0.5) !important;
     border: none !important;
 }

body {
  background-image: url('https://cdn.pixabay.com/photo/2017/07/07/12/31/lime-2481346_960_720.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Inverted Navbar</h3>
  <p>An inverted navbar is black instead of gray.</p>
</div>

</body>

<强> Codepen

在此处详细了解rgba：CSS Colors

Answer 2

#b8e5fa相当于rgb(184,299,250)和hsl(199°, 87%, 85%)，因此对于具有不透明度的颜色，您可以使用rgba或hsla：

.nav-links .navbar-inverse {
     background-color: rgba(184, 229, 250,0.2);
     //more code
}

Answer 3

在你的代码中因为你正在使用bootstrap并且你已经使用了它的导航类“.navbar-inverse”，它提供了默认的黑色。因此，如果您想覆盖它，只需使用

Debug

使其透明如果你想要使用任何其他颜色，你可以覆盖它（bootstrap的css）。

Answer 4

你可以使用rgba或像那样使用

 background-color: transparent;

或

background-color: rgba(184, 229, 250,0.2);

Answer 5

你可以通过使用来实现的背景色：透明;

.nav-links .navbar-inverse { background-color:transparent; border: none; height: 100px;}

如何使导航菜单背景颜色透明？

5 个答案: