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

Question

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

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>