Question

我对CSS很新，遇到了问题。我的应用程序中有一个水平（Bourbon Refills）导航栏。在我的主页上，导航栏是半透明的，背景图像显示出来。我希望导航栏在所有其他视图中都是不同的颜色（例如，除了主页之外，所有视图中的背景颜色都应该是黑色）但是我不确定除了拥有两个单独的导航栏之外如何做到这一点。当然有一个更好的解决方案。（现在我将导航栏放在我的index.html.erb文件中作为部分<%= 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上添加一个类，并仅在该类位于导航栏时更改背景颜色。

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

只有当您不在主页上时，才可以使用某些条件在导航栏上添加课程。

编辑：

在控制器中作为实例变量，例如@black_header = true，然后在.erb文件中执行

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

如果您的所有网页都有除主页之外的黑色标题，那么您实际上可能希望在此处执行相反的操作。（当您不想要黑色标题时使用实例变量，并将其默认为黑色）

（HTML＆amp; CSS）仅限主页上的透明导航栏。其他视图中的黑色背景色

1 个答案: