（HTML＆CSS）ホームページ上の透明なナビゲーションバー。他のビューの黒い背景色

Question

私はかなり新しいCSSですし、問題に遭遇しました。私は、私のアプリケーションに水平（Bourbon Refills）ナビゲーションバーを持っています。私のホームページでは、ナビゲーションバーは半透明で、背景画像は透けて見えます。私はnavbarが他のすべてのビューで異なる色になりたいと思います（例えば、backgoundの色はホームページを除くすべてのビューで黒くなります）が、2つの別個のnavbarsを除いてこれを行う方法は不明です。確かに良い解決策があります。 （現在、私はindex.html.erbファイルにnavbarを部分的に<%= render 'partials/navbar' %>として配置しています）。

navbar.scss：

header.navigation { 
    $base-border-color: gainsboro !default; 
    $base-border-radius: 3px !default; 
    $action-color: #477DCA !default; 
    $dark-gray: #333 !default; 
    $large-screen: 53.75em !default; 
    $navigation-padding: 1em; 
    $navigation-background: transparent; 
    $navigation-color: white; 
    $navigation-color-hover: transparentize(white, 0.2); 
    $navigation-height: 70px; 
    $navigation-nav-button-background: $action-color; 
    $navigation-nav-button-background-hover: lighten($navigation-background, 10%); 
    $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20%); 
    $navigation-active-link-color: transparentize(white, 0.5); 
    $horizontal-bar-mode: $large-screen; 

    background-color: $navigation-background; 
    min-height: $navigation-height; 
    width: 100%; 
    z-index: 999; 

    .navigation-wrapper { 
    @include clearfix; 
    position: relative; 
    z-index: 9999; 
    background-color: rgba(0,0,0,0.06); 
    } 

_navbar.html.erb：

<header class="navigation" role="banner"> 
    <div class="navigation-wrapper"> 
     <a href="javascript:void(0)" class="logo"> 
     <!--<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo Image"> 
     </a>--> 
     <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">MENU</a> 
     <nav role="navigation"> 
     <ul id="js-navigation-menu" class="navigation-menu"> 
      <li class="nav-link"><%= link_to 'Camelot Chess', root_path %></li> 
      <% if user_signed_in? %> 
      <li class="nav-link"><%= link_to 'Create Game', new_game_path %></li> 
      <li class="nav-link"><%= link_to 'Join Game', games_path %></li> 
      <li class="nav-link right"><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li> 
      <li class="nav-link right">Hello, <%= current_user.email %></li> 
      <% else %> 
      <li class="nav-link right"><%= link_to 'Sign Up', new_user_registration_path %></li> 
      <li class="nav-link right"><%= link_to 'Sign In', new_user_session_path %></li> 
      <% end %> 
     </ul> 
     </nav> 
    </div> 
    </header> 

Answer 1

あなたは.navigation-wrapperにクラスを追加し、そのクラスがNAV上にある場合にのみ、背景色を変更することができます。

.navigation-wrapper.black { 
    background-color: black; 
} 

ホームページにいない場合のみ、条件付きでナビゲーションにクラスを追加できます。

編集：のような@black_header = trueしてから.erbファイル内のすべてのページがホームページを除いて黒ヘッダを持っている場合は、

<header class="navigation-wrapper <%= @black_header? + 'black' : '' %>" " role="banner" 

行うが、その後、インスタンス変数としてコントローラで

ます実際にはここでは反対にしたいと思うかもしれません。 （黒いヘッダーを使用しない場合はインスタンス変数を使用し、デフォルト値は黒に設定してください）