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);
}

参考下面的工作原型。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

透明导航栏后退

1 个答案: