透明なnavbarフォールバック

Question

私はページ上の2番目の要素が-50のマージンを持つヒーローヘッダーであるため、透明なブートストラップnavbarを持っています（ヒーローイメージはメニューの後ろにあります。

しかし、一部のページにはヘッダーイメージがありません。デフォルトの白い背景には表示されない透明なナビゲーションバーが残っています。

ページに主人公がいない場合、navbarが何らかのバックグラウンドを持つようにフォールバックを書き込むにはどうすればよいですか？好ましくは純粋なCSS。たぶん、いくつかのスマートなレイヤードと？それを理解できません。

Answer 1

質問に使用しているHTMLが表示されないため、プロジェクトのレイアウトを推測しようとしました。これを行う最も簡単な方法は、cssの擬似クラスを使用することです。これを使用して、ナビゲーションバーの背後にイメージや色を表示できます。

私たちがコンテナに与える理由は、ヒーローイメージがそこにあると、擬似要素がヒーローイメージの背後にあり、見えなくなるからです。しかしヒーローイメージが欠けていると、擬似要素が見えます。

CSS：

.container::before { 
    content: ''; 
    height: 50px; 
    width: 100%; 
    position: fixed; 
    top:0; 
    background-color: rgba(0,0,0,0.2); 
} 

は、以下の作業プロトタイプを参照してください。

.nav { 
 
    height: 50px; 
 
    color: white; 
 
    background: transparent; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index:1000; 
 
    display: block; 
 
} 
 

 
.container::before { 
 
    content: ''; 
 
    height: 50px; 
 
    width: 100%; 
 
    position: fixed; 
 
    top:0; 
 
    background-color: rgba(0,0,0,0.2); 
 
}

<div class="container"> 
 
    <div class="nav">Nav Content</nav> 
 
</div>