透明导航栏后备答案

【问题标题】：Transparent navbar fallback透明导航栏后备
【发布时间】：2017-07-21 16:33:51
【问题描述】：

我有一个透明的引导导航栏，我页面上的第二个元素是页边距为 -50 的英雄标题（所以英雄图片位于菜单后面，这就是我想要的）。

但是，在某些页面上没有标题图像，我留下了一个透明的导航栏，在默认的白色背景上不可见。

如果页面上没有英雄，我怎样才能最好地为导航栏写一个后备有某种背景？最好是纯CSS。也许有一些智能分层？想不通。

【问题讨论】：

请提供更多代码或演示。这不足以让我们解决您的问题。阅读this，了解如何提供可行的演示。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：