0

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

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

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

第三层包含菜单项。

这是一个 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. 建议我不相信我可以申请，我希望图像中的某个点突然透明，而不是渐变到透明。

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

4

1 回答 1

2

我可以想到 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 部分。此解决方案的主要问题是无法在该属性中使用百分比，因此如果您希望它灵活，它的用途有限。

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

演示 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;      
}

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

演示3

于 2013-07-20T11:36:44.583 回答