NavBar上に表示される背景画像

Question

自分のナビゲーションバーに干渉しないで自分のウェブサイトの背景画像を設定する方法を見つけるのに問題があります。画像が私のnavbarに表示されるのが好きなようです。私のnavbarに私の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>