Question

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

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

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

Here's the code

Answer 1

z-index，布鲁赫。

当元素重叠时，z顺序决定哪一个覆盖另一个。具有较大z-index的元素通常覆盖具有a的元素低一点。

.topnav{z-index:9999999}

try it

对于透明BG颜色，您可以使用rgba()。有online tools可以转换你所有的颜色。

Answer 2

您可能需要考虑将标题消息放入标题幻灯片div中，然后将此div置于相对位置。这样你的标题消息实际上绝对位于标题中而不是正文中。然后，如果您希望导航在标题图像上透明，那么您可以将您的身体定位到相对位置以确保安全并将导航定位到绝对位置，使其具有高z值，并且可以通过使用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;
}

然后从导航中删除最大宽度为680像素的响应式CSS的相对位置，请完全删除以下内容：

ul.topnav.responsive {position: relative;}

带有背景图片上文字的自适应菜单

2 个答案: