CSS挑战：活动时的背景图像透明度

Question

我试图在网站上复制以下设计，但到目前为止，我的尝试一直没有结果。我知道这是可能的，但我相信我的方法可能是错误的。

设计：

我的方法

<div class="nav-container">
   <nav class="nav">
       <ul class="nav-ul">
           <li><a href="#"><label>just another psd file</label></a></li>
           <li>
              <a href="#"><label>item 1</label></a>
              <ul>.... leave this out for now</ul>
           </li>
           <li><a href="#"><label>item 2</label></a></li>
           <li><a href="#"><label>item 3</label></a></li>
           <li><a href="#"><label>item 4</label></a></li>
           <li><a href="#"><label>item 5</label></a></li>
       </ul>
   </nav>
</div>

我的CSS：

.nav-container {
    background-color: rgba(0, 0, 0, 0.25);
    height: 100px;
    width: 100%;
}
.nav-container nav {
    background-color: rgb(0, 189, 192);
    height: 95px;
    width: 100%;
}
.nav-container nav ul {
    margin: 0 auto;
    width: 62.5rem;
}

我的问题是，当<nav>被悬停时，<li>上应该会发生透明度，但由于它是一个可靠的全角元素，我实际上并不是真的。切＆＃39;把它的一部分。我尝试使用JavaScript和透明图像来做到这一点，但效果并不像我想要的那样。

这种方法应该像拉伸<ul>全宽，<li>＆＃39}一样简单，然后悬停，设置<li>＆＃39 ; s背景状态是透明的，但这种方法对于这样一个简单的＆＃39;而言似乎相当艰巨。效果，没有？

更新

问题是：

我们有＆＃39;层＆＃39;在示例屏幕截图中。

第1层是黑色，不透明度为25％

第1层中的

是另一个表示具有蓝色背景颜色的第2层。

第2层中的

是一个居中的栏

<div class="layer1">
   <div class="layer 2">
        <nav>
            <ul class="centered ul">
               <li>First part</li>
               <li>Item 1</li>
               <li>Item 2</li>
               <li>Item 3</li>
               <li>Item 4</li>
               <li>Item 5</li>
            </ul>
        </nav>
   </div>
</div>

当用户登陆页面时，＆＃39;第一部分＆＃39;应该＆＃39;切断＆＃39;蓝色背景层（第2层）的一部分。当用户然后将鼠标悬停在第1项上时，“第一部分”将被覆盖。应该有蓝色背景，而第1项现在应该是透明的。

不幸的是，我没有这个过程的截图:(。

我的问题是，我该如何切断＆＃39;第2层上的部分（透明度显示第1层）当5个项目中的任何一个被悬停然后被激活（菜单点击）？

Answer 1

看起来你有一个灰色的背景，在蓝色背景后面，一条始终可见的灰色线穿过底部，你希望单个项目的背景在悬停时是灰色的吗？

我个人会删除第1层和第1层。 2来自您的HTML和CSS。

/*CSS for answer*/
body{
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Winnersh_Meadows_Trees.jpg);
  background-size: 100%;
  }
nav{
  display:block;
    height: 120px;
    width: 100%;
    background-color: rgba(0, 0, 0, .25);
}
li:hover{
  background-color: transparent
}


/*basic styling to mimic OP design*/
*{margin:0;padding:0;}
ul{
  display: block;
  height: 100px;
  margin: 0 auto;
  list-style-type: none;
}
li{
  float: left;
  display: block;
  width: 15%;
  height:100px;
  text-align: center;
  background-color: rgb(0, 189, 192);
}
ul:before,
ul:after{
  float:left;
  display:block;
  content:"";
  width:12.5%;
  height:100%;
  background-color: rgb(0, 189, 192);
}

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</nav>

Answer 2

让<li>绘制自己的背景，以便它们在:hover上变得透明。

http://jsfiddle.net/je59w24u/

这个想法很简单，但还有一些工作要做，以便我们覆盖<li>元素以外的方面。这是一个经过修改的视图，用于显示执行此任务的三个部分：http://jsfiddle.net/je59w24u/1/

：之前和之后：

.nav-container nav ul:before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 11.25rem;
    margin-right: 50%;
    content: "";
    background-color: rgb(128, 189, 192);
}

.nav-container nav ul:after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 11.25rem;
    right: 0;
    margin-left: 50%;
    content: "";
    background-color: rgb(0, 189, 212);
}

我已经使用绝对定位和边距来纠缠这些。对于每一个，没有走到边缘的一边从中间开始（通过50％的边距）找到它的位置，并向外移动一半的居中<ul>（11.25rem）的宽度

浮动<li> s 后的

空格

.fill {
    background-color: rgb(0, 209, 192);
    height: 95px;
    overflow: hidden;
}

它只是一个额外的<li>，但没有浮动。据说overflow: hidden使得它不会在花车后面涂漆。我不知道，我在这篇文章中看到了它，这可能比我能更好地解释它：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

然后是:hover东西

现在双方都已画上，只需从background-color移除<nav>并将其放在<li>上即可。并添加规则，使其在:hover上具有透明背景。

.punch:hover {
    background-color: transparent;
}

我添加了一个类名，以便.punch和.fill不会相互干扰。