顯示在NavBar下的背景圖片

Question

我在嘗試弄清楚如何爲我的網站設置背景圖片時遇到問題，而不會影響我的導航欄。看起來像圖像喜歡爲我的導航欄顯示。這似乎是我的導航欄上有我的CSS問題？我對HTML/CSS相當新，所以任何幫助將不勝感激:)。

Image Problem

html { 
 
    background: url(background-image.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
/* TOP-NAV CSS */ 
 

 
.navbar { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    line-height: 1.43; 
 
    color: #484848; 
 
    overflow-x: hidden; 
 
} 
 

 
.top-nav { 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.logo:link { 
 
    position: relative; 
 
    color: #484848; 
 
    display: inline-block; 
 
    transition: all 0.3s ease; 
 
    -webkit-transition: all 0.3s ease; /*Chrome/Opera/Safari */ 
 
    -moz-transition: all 0.3s ease; /* Firefox */ 
 
    -ms-transition: all 0.3s ease; /* IE */ 
 
} 
 

 
.logo:visited { 
 
    color: #484848; 
 
} 
 

 
.logo:hover { 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Image Logo */ 
 

 
.logo img { 
 
    position: relative; 
 
    padding: 16px 19px; 
 
    width: 100px; 
 
    border-right: 1px solid #ccc; 
 
    vertical-align: middle; 
 
} 
 

 
/* NAV-SEARCH CSS */ 
 

 
#nav-search-wrapper { 
 
    display: inline-block; 
 
    width: 490px; 
 
    height: 100%; 
 
} 
 

 
/* Search Bar Form */ 
 

 
#nav-search-wrapper form input { 
 
    padding: 18px 10px 18px 52px; 
 
    width: 100%; 
 
    border: none; 
 
    outline: none; 
 
    color: #666; 
 
    font-size: 14px; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    background-image: url('search-icon.svg'); 
 
    background-repeat: no-repeat; 
 
    background-position: 25px; 
 
    background-size: 18px; 
 
}

<div class="navbar navbar-default navbar-fixed-top"> 
 
    <header> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabe=no" /> 
 
    <link rel="stylesheet" type="text/css" href="header.css" /> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" /> 
 
     <div class="top-nav clearfix"> 
 
     <a href="" class="logo"> 
 
     <img src="" class="logo"/> 
 
     </a> 
 
     <div id="nav-search-wrapper"> 
 
      <form method="GET" action=""> 
 
      <input type="text" name="search" id="nav-search" placeholder="Search" /> 
 
      </form> 
 
     </div> 
 
     <ul> 
 
     <li><a href="">Ticket Form</a></li> 
 
     <li><a href="">Locations</a></li> 
 
     <li><a href="">About Us</a></li> 
 
     <li><a href="">Sign Up</a></li> 
 
     </ul> 
 
     </div> 
 
    </header> 
 
</div>

Answer 1

如果你想文本字段變得透明。和您的網站的背景圖片，而不會干擾該導航欄。

然後

在.css文件添加透明度。

像這樣

#nav-search-wrapper { display: inline-block; width: 490px; height: 100%; opacity: 0.6; filter: alpha(opacity=60); } 

Answer 2

嘗試把你的.navbar background-color: #fff和z-index財產，看看它是否重疊，你的背景。

檢查此更新的答案。所有在這裏工作得很好，或者你最好發佈你的所有代碼，以便我們能夠弄清楚它的真正問題是什麼。

body { 
 
    // background: url(background-image.png) no-repeat center center fixed; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     background-size: cover; 
 
     background-color: #000; /* just to check if the background applies */ 
 
    } 
 
    
 
    /* TOP-NAV CSS */ 
 
    .navbar { 
 
     margin: 0 auto; 
 
     padding: 0; 
 
     font-family: 'Roboto', sans-serif; 
 
     font-weight: 400; 
 
     line-height: 1.43; 
 
     color: #484848; 
 
     overflow-x: hidden; 
 
     background-color: #fff; /* whole top bar will filled by white color */ 
 
    } 
 

 
    .top-nav { 
 
     position: relative; 
 
     width: 100%; 
 
     height: auto; 
 
     border-bottom: 1px solid #ccc; 
 
    } 
 

 
    .logo:link { 
 
     position: relative; 
 
     color: #484848; 
 
     display: inline-block; 
 
     transition: all 0.3s ease; 
 
     -webkit-transition: all 0.3s ease; 
 
     /*Chrome/Opera/Safari */ 
 
     -moz-transition: all 0.3s ease; 
 
     /* Firefox */ 
 
     -ms-transition: all 0.3s ease; 
 
     /* IE */ 
 
    } 
 

 
    .logo:visited { 
 
     color: #484848; 
 
    } 
 

 
    .logo:hover { 
 
     background-color: #f1f1f1; 
 
    } 
 
    /* Image Logo */ 
 

 
    .logo img { 
 
     position: relative; 
 
     padding: 16px 19px; 
 
     width: 100px; 
 
     border-right: 1px solid #ccc; 
 
     vertical-align: middle; 
 
    } 
 
    /* NAV-SEARCH CSS */ 
 

 
    #nav-search-wrapper { 
 
     display: inline-block; 
 
     width: 490px; 
 
     height: 100%; 
 
    } 
 
    /* Search Bar Form */ 
 

 
    #nav-search-wrapper form input { 
 
     padding: 18px 10px 18px 52px; 
 
     width: 100%; 
 
     border: none; 
 
     outline: none; 
 
     color: #666; 
 
     font-size: 14px; 
 
     box-sizing: border-box; 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     background-image: url('search-icon.svg'); 
 
     background-repeat: no-repeat; 
 
     background-position: 25px; 
 
     background-size: 18px; 
 
    }

<div class="navbar navbar-default navbar-fixed-top"> 
 
    <header> 
 
     <div class="top-nav clearfix"> 
 
      <a href="" class="logo"> 
 
       <img src="" class="logo" /> 
 
      </a> 
 
      <div id="nav-search-wrapper"> 
 
       <form method="GET" action=""> 
 
        <input type="text" name="search" id="nav-search" placeholder="Search" /> 
 
       </form> 
 
      </div> 
 
      <ul> 
 
       <li><a href="">Ticket Form</a></li> 
 
       <li><a href="">Locations</a></li> 
 
       <li><a href="">About Us</a></li> 
 
       <li><a href="">Sign Up</a></li> 
 
      </ul> 
 
     </div> 
 
    </header> 
 
</div>