透明導航欄後備

Question

我有一個透明的自舉導航欄，我的頁面上的第二個元素是-50的頁邊空白（所以英雄圖像在菜單後面，這就是我想要的）。

但是，在一些頁面上沒有標題圖像，我留下了一個透明的導航欄，它在默認的白色背景上不可見。

如何在頁面上沒有英雄的情況下如何最好地爲導航欄編寫後備文件以獲得某種背景？最好是純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>