我打算把它写得简短一点,这样就很容易理解了。
这是场景:
- 我的菜单不透明(这有效)
- 我正在尝试从弹出窗口中移除不透明度(last li, #myModal)(这不起作用)
header中的一些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">×</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/