Question

滚动仅包含背景图像的部分时，导航栏变为半透明且无效。

我希望导航栏保持活动状态，同时保持整个网站的样式。

我这里只使用HTML和CSS。如果我包含css，StackOverflow不会让我发帖，因为它说代码太多了。

有人可以帮我弄清楚要写什么来解决这个问题吗？

我只包括小提琴中的相关代码。

小提琴： https://jsfiddle.net/makemommaproud/7q8pxg76/

 <header>
   <div class="container">
     <div id="branding">
       <h1>Name</h1>
     </div>
     <nav role="navigation" class="navbar">
       <ul>
         <li><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav>
   </div>
  </header>

Answer 1

将展示中的不透明度更改为1：

#showcase{
    min-height: 500px;
    padding-top:;
    background:url("http://travel.home.sndimg.com/content/dam/images/travel/fullset/2015/08/03/top-florida-beaches/key-west-beach-florida.jpg.rend.hgtvcom.966.725.suffix/1491580836931.jpeg") no-repeat 0;
    text-align: center;
    color: white;
    opacity: 1;
}

另一个选项是在标题中添加z索引：

header{
    background: white;
    color: #282e34;
    padding-top: 0px;
    min-height: 50px;
    border-bottom: black px solid;
    box-shadow: 0 1px 3px 1px #666;
    position: fixed; /* Added for fixed navbar */
    width: 100%; /* Added for fixed navbar */
    z-index: 100;
}

滚动背景图像时，导航栏变为半透明且无效

1 个答案: