背景图像上带有文本的响应式菜单

Question

我在图像背景顶部有一个响应式菜单，顶部也有文本。

因为我必须将文本消息设置为“position: absolute”以使其覆盖在背景图像之上，所以当我展开菜单时，菜单项将覆盖在文本消息上。我该如何解决？

另一个问题是我希望菜单在背景图像上是透明的，而不是在深灰色背景上。但是，我似乎找不到这样做的方法。

Here's the code

Answer 1

您可能需要考虑将标题消息放在标题幻灯片 div 中，然后将此 div 定位到相对位置。这样，您的标头消息实际上绝对位于标头而不是正文中。然后，如果您希望您的导航在标题图像上透明，那么您可以将您的身体定位为相对安全，并将您的导航定位为绝对，给它一个高 z-index 和背景不透明度可以通过使用 rgba 颜色来实现。所以类似于以下内容：

这是一个小提琴演示Fiddle Demo

标题：

.header-slides {
  height: 500px;
  border: 1px solid black;
  position:relative;
}

<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
  <h2>Header Message</h2>
</div>

然后你的导航：

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(20,20,20,0.8);
  min-height: 30px;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:5;
}

然后从您的导航中删除最大宽度为 680px 的响应式 css 中的 relative 位置，因此完全删除以下内容：

ul.topnav.responsive {position: relative;}

Answer 2

z-index，兄弟。

当元素重叠时，z-order 确定哪个元素覆盖另一个元素。 具有较大 z-index 的元素通常覆盖具有 低一个。

.topnav{z-index:9999999}

try it.

---

对于透明背景颜色，您可以使用rgba()。到处都有online tools可以转换你的颜色。