Question

我有一个用div构建的菜单，我希望菜单项具有较低层背景，在这种情况下是正文。

结构：

body {
  background-image: url(path/body.png);
}

#menu {
  overflow: hidden;
  width: 400px;
  background-color: #fff;
}

.mm {
  overflow: hidden;
  float: left;
  background-color: #fffl padding:5px 10px;
  margin: 0 0 0 10px;
}

.mm.this {
  background-color: transparent;
  z-index: -9999;
}

<body>
  <div id="menu">
    <div class="mm this">Home</div>
    <div class="mm">Contact</div>
  </div>
</body>

看起来像这样：

enter image description here

你希望它看起来像那样： enter image description here

Answer 1

有几种方法可以做到这一点。这是众多的一个：

.mm.this {
  position: relative;
  z-index: -9999; /*remove this or set it to auto or a positive value*/
}

.mm.this:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 1px;
}

这会创建一条水平线并将其定位在活动标签的底部。这将与下面的灰色边框重叠，并带有白线。

背景图层元素较低（html / css）

1 个答案: