如何通过透明导航栏使横幅图像可见？

我已经用Bootstrap编写了以下代码4.在下面的图片中，我描述了我想要实现的内容。谢谢！如何通过透明导航栏使横幅图像可见？

<style> 
     div.jumbotron { 
      background: #458392 url("img/banner.jpg") no-repeat right; 
     } 

     nav.navbar { 
      background: rgba(69, 131, 146, 0.4); 
     } 
    </style> 

<body> 

<nav class="navbar navbar-toggleable-sm navbar-inverse"> 
    /*some code*/ 
</nav> 

<div class="jumbotron jumbotron-fluid text-white"> 
    /*some code*/ 
</div> 

</body>

来源

2017-05-29 Rusletov

http://xomisse.com/blog/make-navigation-bar-other-blog-elements-partially-transparent/ – tech2017

我已经使用了opacity属性和rgba值。它没有帮助。导航栏的颜色变得更轻，就这些了。我需要的是通过导航栏使横幅图像可见。 – Rusletov

你尝试过改变z-index吗？ – tech2017

如果我知道它的正确性，您需要将导航栏实际放在横幅上。目前他们只是彼此相邻。尝试调整位置 - 绝对或固定。

来源

2017-05-29 18:57:31

你说得对。我是bootstrap的新手，所以我不知道如何使用它进行编码。现在我已经将navbar元素放在横幅上，几乎得到了我想要的。 – Rusletov

如何通过透明导航栏使横幅图像可见？

回答

相关问题