悬停到背景图像时的半透明菜单项

Question

有没有办法让菜单项悬停对背景图像透明？ 如您所见，背景中的图像设置了 background-size 封面选项，并且背景可以缩放到不同的屏幕尺寸。

HTML：

<div class="header">
  <p></p>
  <div class="menu-container">
    <ul>
      <li><a href="#" title="">Menu 1</a></li>
      <li><a href="#" title="">Menu 2</a></li>
      <li><a href="#" title="">Menu 3</a></li>
    </ul>
  </div>
  <p></p>
</div>

CSS：

div.header{
  background: url('http://de.fwsx.co/mbergs/images/home-header.jpg') no-repeat;
  background-size: cover;
  height: 400px;
}  

p:first-child,
p:last-child {
  height: 50px;
}

div.menu-container {
  background: #fff;
}

div.menu-container ul li {
  display: inline-block;
  list-style: none;
}

div.menu-container ul li a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}

div.menu-container ul li a:hover {
  background: rgba(64,161,47, 0.6);
}

jsFiddle：https://jsfiddle.net/qwLp9f9y/1/

编辑：全宽菜单容器必须保持纯白色。

谢谢。

Answer 1

我建议切换到表格布局以实现此目的：https://jsfiddle.net/Lv0rkhun/1/

我想不出使用 ul/li 元素的方法。

  <table class="menu-container" cellspacing="0" cellpadding="0">
    <tr>
      <td><div></div></td>
      <td><a href="#" title="">Menu 1</a></td>
      <td><a href="#" title="">Menu 2</a></td>
      <td><a href="#" title="">Menu 3</a></td>
      <td></td>
    </tr>
  </table>

Answer 2

我已经从容器中移除了背景（只有通过跨浏览器的方式来解决这个问题）。

为了能够在视觉上重现容器上的白色背景，我在 li 上添加了小阴影（以填补一个和下一个之间的空白），并在第一个和最后一个上添加了一个 before 伪元素，覆盖两边的边距

div.header{
  background: url('http://de.fwsx.co/mbergs/images/home-header.jpg') no-repeat;
  background-size: cover;
  height: 400px;
}  

p:first-child,
p:last-child {
  height: 50px;
}


div.menu-container ul li {
  display: inline-block;
  list-style: none;
  background: #fff;
  box-shadow: 5px 0px white;
  position: relative;
}

.menu-container li:first-child:before {
  content: "";
  position: absolute;
  width: 500px;
  height: 100%;
  top: 0px;
  right: 100%;
  background-color: white;
}
.menu-container li:last-child:before {
  content: "";
  position: absolute;
  width: 500px;
  height: 100%;
  top: 0px;
  left: 100%;
  background-color: white;
}
div.menu-container ul li a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}

div.menu-container li:hover {
  background: rgba(64,161,47, 0.4);
}

<div class="header">
  
  <p>

  </p>
  
  <div class="menu-container">
    <ul>
      <li><a href="#" title="">Menu 1</a></li>
      <li><a href="#" title="">Menu 2</a></li>
      <li><a href="#" title="">Menu 3</a></li>
    </ul>
  </div>
  
  <p>

  </p>
  
</div>