div透明的一部分

Question

我想创建一个由三层组成的菜单。 菜单应该在整个屏幕宽度上延伸。

第一层是包含渐变的图像。由于菜单在宽度上拉伸，因此颜色的变化/宽度量取决于。它看起来像这样：

第二层看起来就像第一层一样，但让我们说蓝色而不是红色。所以它包含相同的渐变。我想用第一层覆盖这一层的部分，以突出显示一个选定的菜单项。

第三层包含菜单项。

这是一个jsfiddle：http://jsfiddle.net/UrVq2/9/ 它是相应的代码：

HTML：     <div id="firstLayer"></div> <div id="secondLayer"></div> <div id="thirdLayer">Click me</div>

CSS：

#firstLayer {
 background-image:url('http://s21.postimg.org/imynbhjo7/example.jpg');
 background-size: 100% 100%;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0
}

#secondLayer {
 background-image:url('http://s13.postimg.org/5o17i8wwn/example2.jpg');
 background-size: 100% 100%;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0
}

#thirdLayer {
 position:absolute; 
 top: 50px; 
 left: 50%;
}

当要突出显示菜单中的某些内容，并在第一层渐变和第二层渐变之间获得匹配时，我会在屏幕的整个宽度上拉伸第一层和第二层。然后我尝试使第二层的部分不突出透明。但是，我没有这样做。有没有办法实现它，还是我应该采取另一种方法？

e.g。我试过跟https://stackoverflow.com/a/8422890/1419386，但由于渐变，我无法应用1.和3.建议。 2.建议我不相信我可以申请，我想在图像中的某个点突然透明，而不是透明度的渐变。

（只是从两个图层中分离出渐变对我来说不起作用，因为它实际上也与它下面的颜色（红色或蓝色）不同，所以它只是一个简化的例子）。

Answer 1

我可以想到3个不同的职位来解决你的问题。

所有这些都是基于裁剪而不是透明度，所以我们需要做的第一件事就是改变div的顺序：

HTML：

<div id="thirdLayer">hover me</div>
<div id="secondLayer"></div>
<div id="firstLayer"></div>

我还移动了前面的第三层，这样我就可以在没有脚本的情况下使用悬停状态，但这并不重要。

第一个可能性使用剪辑。的CSS：

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0;
 clip: rect(10px,0px,80px,0px);
 -webkit-transition: all 2s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#thirdLayer:hover ~ #firstLayer {
    clip: rect(10px,800px,80px,400px);
}

大多数CSS都是标准的东西。我已经用渐变替换了youyr图像，因此该示例不依赖于它们的可用性。关键问题是使用

    clip: rect(10px,800px,80px,400px);

仅显示div所需的部分。该解决方案的主要问题是在该属性中使用百分比是不可能的，因此如果您希望它具有灵活性，则它的用途有限。

demo 1

第二个可能性是使用背景大小：

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 1000% 40%, 1000% 100%;
 background-repeat: no-repeat;
 backgrond-position: -10% 0%;
 width: 10%; 
 height: 100px; 
 position:absolute; 
 left:-10%;
 top:0;
 -webkit-transition: all 3s;
 transition: all 3s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0; 
 top:0
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#thirdLayer:hover ~ #firstLayer {
    left: 47%;
    background-position: 47% 0%, 47% 0%;
}

demo 2

请注意，为了补偿背景的宽度现在是10％，背景大小现在是1000％，所以porportion是相同的： 由于微积分的不同，渲染中可能会有轻微的偏移，但系统安静得很好。

第三个可能性是使用剪贴蒙版（浏览器支持有限）

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 background-position: 0% 0%;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0;
 top:0px;
 -webkit-transition: all 3s;
 transition: all 3s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0; 
 top:0;
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#firstLayer {
 -webkit-mask-position: -15% 0px;      
 -webkit-mask-size: 84px 100%;      
 -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
 -webkit-mask-repeat: no-repeat;
}
#thirdLayer:hover ~ #firstLayer {
 -webkit-mask-position: 52% 0px;      
}

我们定义一个掩码，唯一剩下的问题是设置位置

demo3