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

Question

有没有办法使菜单项悬停透明到背景图像？如您所见，背景中的图像是使用background-size cover选项设置的，并且在不同的屏幕大小下可以缩放。

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/

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

谢谢。

- Janiis

---

这是你想要的吗？https://jsfiddle.net/qwLp9f9y/2/ - Senjuti Mahapatra

@Alorika 确定它不是这样的。 - CoderPi

请查看此链接 https://jsfiddle.net/qwLp9f9y/3/。 - Arun Kumar M

@CodeiSir：半透明背景，类似于这个：https://jsfiddle.net/qwLp9f9y/4/ - Senjuti Mahapatra

完整宽度的菜单容器必须保持纯白色。 - Janiis

@Janiis，我的解决方案对你有用吗？ - CoderPi

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>

- CoderPi

---

谢谢，但我需要使用ul/li布局。我尝试添加::before和::after元素，但没有成功。 - Janiis

@Janiis，我可以问一下为什么你需要它是ul/li吗？也许我们可以解决这个问题，因为没有表格会很困难。 - CoderPi

谢谢。我需要它也是响应式菜单，所以最好的选择是无表格布局。 - Janiis

这里是实时/演示菜单和布局：http://de.fwsx.co/mbergs/，正如您所看到的，它也是嵌套菜单，因此没有表格布局选项。 - Janiis

我投入时间，然后你来说你需要额外的这个和那个... 你应该从一开始就说出你需要什么。 - CoderPi

抱歉，我是这个论坛的新手。如果您的解决方案适用于所提出的问题，并且没有其他回复，我会将您的答案标记为正确的。 - Janiis

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>

- vals

---

谢谢，这正是我在寻找的！ - Janiis

很高兴它有帮助！ - vals