透明导航栏回退

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>