html - 菜单中有不透明度，但列表中没有

我将简短介绍一下，因此很容易理解。

这是方案：


我的菜单不透明（可以正常工作）
我正在尝试从弹出窗口中删除不透明度（最后一个li，＃myModal）（这不起作用）


标头中的一些html：

<div id="header_menu">
   <label for="show-menu" class="show-menu"><img src=<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/innbokskontroll_nav_menu.png height="15px"></label>
   <input type="checkbox" id="show-menu" role="button">
   <ul id="menu">
      <li><a href="http://sookvisuals.com/dev/innbokskontroll/referanser/">referanser</a></li>
      <li><a href="http://sookvisuals.com/dev/innbokskontroll/blogg">blogg</a></li>
      <li class="popupp"><a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">bestill foredrag!</a>
      <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div><!-- End of Modal body -->
      </div><!-- End of Modal content -->
      </div><!-- End of Modal dialog -->
      </div>
      </li>
   </ul>
</div>

很抱歉，如果这是一个凌乱的HTML。我试图使对SO的理解变得简单。

当前为菜单添加不透明度的CSS如下：

#header_menu {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

要消除不透明性，我尝试了以下方法，但是不起作用：

#myModal {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.modal-content, .modal-dialog {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    text-align: left;
}

li.popupp {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

您能帮我找到解决方案吗？

最佳答案

代替使用opacity尝试使用rgba如下所示。

 #header_menu
{
  background-color:rgba(0,0,0,0.7);
 }

因此，这不会影响任何子元素。因此，无论您想要不透明之处，都可以像上面一样使用它。您唯一需要赋予它rgb格式的东西。

关于html - 菜单中有不透明度，但列表中没有，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27188780/