背景色を透明化したい

Question

bootstrap4で、ナブバーのハンバーガーメニューがクリックされた時、サイトの内容が見えるように、出てきたリンクのbackground-colorだけ透明化したいのですが、可能でしょうか。

.show {
  .navbar-nav {
    background-color: rgba(226, 241, 252, 0);
  }
}

このようにしたのですが変わってくれません。redなどを指定するとちゃんとredになってくれるのでセレクタはあってると思います。そもそも仕様でできないのでしょうか？

該当のhtml

<div class="collapse navbar-collapse order-xs-2 order-md-1 show" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item mx-md-auto active">
            <a class="nav-link text-nowrap" href="/">TOP<span class="sr-only">(current)</span> </a>
          </li>
          <li class="nav-item mx-md-auto ">
            <a class="nav-link text-nowrap" href="/help">お問い合わせ </a>
          </li>
          <li class="nav-item mx-md-auto ">
            <a class="nav-link text-nowrap disabled" href="#">キャンペーン情報</a>
          </li>
        </ul>
    </div>

Answer 1

ul.navbar-nav の親要素のdivや、さらにその親要素などに背景色が指定されていませんか。ul.navbar-nav はちゃんと透明になっているものの、その下層にそもそも色がついているので、その色が透けて見えているのではないかと思います。

余談ですが、 background-color: transparent; のほうが、透明にしようとしているという意図がわかりやすくていいかと思います。

Comments

[shumbow]

ありがとうございます！thydaさんのいう通り、親要素のnavの背景色が適用されてしまっている感じです！しかし解決できません。親要素navのbackground-colorをなくすと他の必要な要素の色まで消えてしまいます。また、nav以下の個々の要素に背景をセットして、.show>.navbar-navのみ透過する方法も試してみましたが、他の要素のあいだに空白ができてしまうのでこれもダメです。なので今、nav以下の要素をdivタグでリンク部分とそれ以外に分けてスタイルを当てようとしてますが、ダメっぽいです。ありがとうございました。また何かあればよろしくお願いします。

Answer 2

application.js
$(function() {
$(".navbar-toggler").click(function() {
// cssで背景色を切り替え
$(".navbar").toggleClass("bg-click");
});
});

application.scss
.bg-click {
background-color: rgba(226, 241, 252, 0.8);
}

妥協しましたが、トグルボタンクリック時にナブバー全体の背景色を変更することで、落ち着きました。また重なっている要素で、子要素の裏にある部分だけ、親要素のbackground-colorを消す方法がわかった方がいましたら教えてください。

Comments

[yasutomi]

この質問の回答者のレベルであれば
どこかに背景色が正しく表示されないWebページのサンプルを
アップしてURLを教えていただければ解決可能です。

[shumbow]

ごめんなさい、railsで書いているので,codepenのようなブラウザで動くものは使えない、herokuにデプロイしているのですが、なぜかうまくいかなかったのでできませんでした！

Answer 3

SCSSではなくCSSで記述しています。
CSSなら正しくはこちらです。
(わかりやすいよう0.8を仮指定)

.show .navbar-nav {
  background-color: rgba(226, 241, 252, 0.8);
}

https://codepen.io/anon/pen/JqRjVd

Comments

[shumbow]

ご回答ありがとうございます。cssで書いても同じでした・・・。

[yasutomi]

なるほど。
ちなみにこちらのリンク先の水色の背景色は見えますか。
(見えなければ質問者様の液晶画面に問題があります)
https://codepen.io/anon/pen/JqRjVd

[shumbow]

見えます！・・・

[yasutomi]

でしたらあとは消去法で
詳細度の違いでほかのスタイルで上書きされている以外の
可能性は考えられないです。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

[shumbow]

原因がわかってきて、近い詳細度のスタイルによる上書きではなくて、.navbar-navの背景を透明にした時、親要素の背景色が死んでいないことによるので、たぶん詳細度の問題ではないです。ありがとうございます。

Answer 4

透明度0%は完全に透明（ほぼ無）なので、100→80→60→30・・・のように少しずつ減らしていったほうが問題の切り分けがしやすくなりますよ。

Comments

[shumbow]

ありがとうございます。すべて0〜1まで段階的に試しても、だめでした。

[m.ts10806]

回答最後に書いてますが直接的な解決策ではなく問題切り分けのやり方です。

[shumbow]

問題を切り分けられませんでした・・・。