html - 透明导航栏回退

Question

我有一个透明的 Bootstrap 导航栏，我页面上的第二个元素是边距为 -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);
}

引用下面的工作原型(prototype)。

.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>