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>

Answer 2

我已从容器中删除了背景（只能通过浏览器方式解决此问题）。

为了能够在视觉上再现容器上的白色背景，我在li上添加了小阴影（以填充一个和下一个之间的间隙）和第一个上的伪元素，并且最后一个，覆盖双方的边缘

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

悬浮在背景图像上的半透明菜单项

2 个答案: