headerにrgbaを使用しても透過しない

Question

現在railsでヘッダーを作成中です。
そこで、scssで下記の様にheaderにコーディングを使用しても効きません。
どうしてこの様な現象が起きるのでしょうか？
どなたかご教授お願い致します。

[application.scss]
@import "bootstrap";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital@1&display=swap');

body {
  overflow-x: hidden;
  font-family: 'Lato', sans-serif;
  color: #505962;
}

//Navigation
header {
  text-transform: uppercase;
  font-weight: 700;
  font-size: .20rem;
  letter-spacing: .1rem;
  background: rgba(0,0,0,0.6)!important;
}

[header.html.erb]
<header class="site-header">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
    <%= link_to "アプリ名", root_path, id: "logo", class: "navbar-brand" %>
      <ul class="navbar-nav">
        <% if user_signed_in? %>
          <li><%= link_to "アカウント編集", edit_user_registration_path, class: "nav-link" %></li>
          <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link" %></li>
        <% else %>
          <li><%= link_to "ログイン",   new_user_session_path, class: "nav-link" %></li>
          <li><%= link_to "新規登録",   new_user_registration_path, class: "nav-link" %></li>
        <% end %>
      </ul>
    </div>
  </nav>
</header>

Answer 1

headerにbackgroundをかけても、それはあくまで<header>自体にしか適用されません。たとえば<nav>に不透明な背景色があれば、そのまま不透明な表示となります。

中身まで透過したい場合はopacityを使ってください。

Comments

[maisumakun]

…と解釈しましたが、起きている現象はどのようなものでしょうか？

[jqk]

application.scssのheaderをnavに変更しても透過できませんでした。
この様な解釈で合ってますでしょうか？

[maisumakun]

そもそも論として、透過させたいのは「背景色だけ」でしょうか？表示する中身も含めてでしょうか？

[jqk]

すいません、背景です！！
上記画像の黒い部分だけです！

[maisumakun]

では、この黒い背景がどのエレメントで指定されているのか探して、そこの指定を切り替える必要があります。

[jqk]

navタグに記載してるbg-darkが必要ないという事だったんですね！！
有難う御座います！！
御影様で、headerが透過できました！！