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

当菜单中的某项要突出显示时，为了使第一层渐变和第二层渐变匹配，我将第一层和第二层都拉伸到整个屏幕宽度。然后我尝试使第二层不高亮的部分透明。但是，我这样做失败了。有没有办法实现它，还是我应该采取另一种方法？

例如我已尝试关注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 都是标准的东西。我已经用渐变替换了您的图像，因此该示例不依赖于它们的可用性。关键问题是使用

    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%，所以比例是一样的： 由于微积分的不同，渲染中可能会有轻微的偏移，但系统很安静。

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

#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