Question

我正在使用bootstrap构建我的第一个站点。我有一个沿着页面顶部运行的反向（黑色）栏，这是我的导航栏。在笔记本电脑上看起来很棒，但导航栏在小屏幕上垂直，覆盖了我所拥有的响应式背景图像（一件艺术作品）。我希望顶部的黑色条具有足够的不透明度，以允许背景图像闪耀一点。我已经搜索了这个主题，但是我从之前的回复中尝试的任何内容都无效。

如何部署背景：

导航栏定义：

<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>

Answer 1

将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/

导航条不透明度问题

1 个答案: