Question

我有一个导航菜单，我希望在不影响标签背景的情况下使其背景透明 - 但它不起作用。当我使用opacity时，整个导航变得透明，甚至是标签。当我使用rgba时，它根本不透明。

这是我的代码：

ul.nav.nav-tabs {
  background-color: rgba(0, 0, 0, .3);
}
ul.nav.nav-tabs li {
  background-color: #6FD508;
}
ul.nav.nav-tabs li a {
  color: white;
}

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#tab1" data-toggle="tab">tab1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab">tab2</a>
  </li>
</ul>

Answer 1

检查它已经正常工作。因为<ul>后面没有任何东西所以它只是显示平坦的灰色，但是如果你注意到你已经应用了黑色，那么由于透明度，它仍然显示为灰色。

使用红色背景颜色添加.dummy div作为<ul>的父级。现在您可以看到<ul>后面的区域是不同的红色。如果<ul>没有透明度，则不应显示.dummy div颜色。

ul.nav.nav-tabs {
  background-color: rgba(0, 0, 0, .3);
}
ul.nav.nav-tabs li {
  background-color: #6FD508;
}
ul.nav.nav-tabs li a {
  color: white;
}
.dummy{
  background:red;
  padding:20px;
}

<div class="dummy">
 <ul class="nav nav-tabs">
   <li class="active">
     <a href="#tab1" data-toggle="tab">tab1</a>
   </li>
   <li>
     <a href="#tab2" data-toggle="tab">tab2</a>
   </li>
 </ul>
</div>

尝试添加来图像或其他元素以让透明度准确显示，因为在白色背景上透明度正常但效果不合适。

更改导航不透明度而不影响标签

1 个答案: