我正在使用引导程序构建我的第一个网站。 我有一个反向(黑色)条沿着页面顶部运行，这是我的导航栏。 在笔记本电脑上看起来很棒，但导航栏在小屏幕上垂直，覆盖了我拥有的响应式背景图像(一件艺术品)。 我希望顶部的黑条具有足够的不透明度，以使背景图像稍微闪耀一下。 我已经搜索了这个主题，但我从以前的回复中尝试过的任何内容都不起作用。
后台部署方式：
导航栏定义：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<a class="navbar-brand" style="font-family: 'Oswald', sans-serif" href="#">SITE TITLE</a>
<ul class="nav navbar-nav">
<li class="active"><a href=#>Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Purchase</a><li>
</div>
将background-image应用于body而不是html，然后使用 RGBA (http://www.w3schools.com/cssref/css_colors_legal.asp) 使用 Alpha 通道创建半透明background-colour，而不是使用opacity。您可以在媒体查询中执行此操作，以便它仅适用于较小的屏幕设备。
注意：对nav应用不透明度也会影响子元素，因此ul，包括导航文本也会变为半透明。使用 rgba 仅影响所选类背景的透明度。
试试这个： https://jsfiddle.net/3mkajcus/1/