Javascript 将溢出隐藏在带有SVG背景的主体顶部带有透明背景的堆叠div后面

我有一个布局，其中包含一个带有按钮的

固定的
div（
#navigation
）。布局还包括可滚动的内容（
.card
）

#导航
当前有一个绿色背景，用于演示。像这样：


#导航{
位置：固定；
顶部：20px；
左：50%；
转换：转换（-50%，0%）；
背景：绿色；
填充：25px；
}
按钮
按钮
按钮
按钮
尝试为#导航设置相同的背景，背景位置相同（参见下面的示例）


#卡片包装器{
宽度：250px；
保证金：100像素自动；
}
.卡片{
高度：200px；
宽度：200px；
背景：131418；
保证金：1em自动；
显示：内联块
}
#航行{
位置：固定；
排名：0；
左：0；
右：0；
z指数：1；
填充：40px25px25px25px；
背景：#ffffff url(http://svgur.com/i/42T.svg);
背景附件：固定；
背景尺寸：封面；
背景位置：0；
}
#主要{
文本对齐：居中；
}
身体{
保证金：0自动；
背景：#ffffff url(http://svgur.com/i/42T.svg);
背景附件：固定；
背景尺寸：封面；
背景位置：0；
}

按钮
按钮
按钮
按钮
如果您不介意为按钮的
高度设置固定值，则可以通过
背景剪辑
样式解决您的任务。在下面的示例中，我还为卡片和按钮添加了单击处理程序，以演示卡片仍然可以单击


$（'.card'）。在（'click'，function（）上{
$（this.addClass（'clicked'）；
})
$（'button'）。在（'click'，function（）上{
$（'.card'）.removeClass（'clicked'）；
})
#卡片包装器{
宽度：250px；
保证金：100像素自动；
}
.卡片{
高度：200px；
宽度：200px；
背景：131418；
保证金：1em自动；
显示：内联块
}
#航行{
背景图片：url(http://svgur.com/i/42T.svg);
背景附件：固定；
背景尺寸：封面；
背景剪辑：内容框；
边界：0无；
填充：0；
排名：0；
左：0；
底部：0；
右：0；
位置：固定；
z指数：1；
框大小：边框框；
/**
calc（）计算值：
25px-。按钮列表填充
20px-导航的顶部偏移量（它也是填充顶部值）
30px——按钮高度；
*/
填充：20px 0计算（100vh-25px*2-20px-30px）；
指针事件：无；
}
钮扣{
高度：30px
}
#主要{
文本对齐：居中；
}
身体{
保证金：0自动；
背景：url(http://svgur.com/i/42T.svg);
背景附件：固定；
背景尺寸：封面；
}
.按钮列表{
填充：25px；
指针事件：初始；
}
/*仅用于点击事件演示*/
.card.clicked{
背景颜色：绿色；
}

按钮
按钮
按钮
按钮
我真的，真的，真的，真的，真的想找到一个解决方案，使用一些新的CSS功能，如
clip
或
background filter
。最后，我找到了一个解决方案，但它肯定很短，而且没有kastriotcunaku的解决方案那么优雅

下面的解决方案使用实验使
#屏幕
元素后面的内容具有
不透明度（0）
。不幸的是，这有其不利之处：


需要几行JavaScript来设置
#screen
元素的尺寸以匹配
#navigation
元素-如果事先知道
#screen
元素的宽度/高度/位置，则可以避免这种情况
将仅在支持
背景过滤器
属性（主要是Safari）的浏览器中工作，或在Chrome浏览器中启用实验性Web平台功能标志（您可以通过转到chrome://flags/#enable-实验性web平台功能（Chrome）

最终结果是：


如果您使用的浏览器支持
背景滤镜
，您可以在下面查看：


var screen=document.getElementById（“screen”）；
var navigation=document.getElementById（“导航”）；
var navigationStyle=window.getComputedStyle（导航，null）；
screen.style.height=navigationStyle.getPropertyValue（'height'）；
screen.style.width=navigationStyle.getPropertyValue（'width'）；
screen.style.border=navigationStyle.getPropertyValue（'border'）；
screen.style.borderColor=“透明”
#卡片包装器{
宽度：250px；
保证金：100像素自动；
}
.卡片{
高度：200px；
宽度：200px；
背景：131418；
保证金：1em自动；
显示：内联块
}
#屏幕，
#航行{
位置：固定；
顶部：20px；
左：50%；
转换：转换（-50%，0%）；
填充：25px；
}
#屏风{
背景滤镜：不透明度（0%）；
-webkit背景滤镜：不透明度（0%）；
}
#航行{
z指数：10；
边框：1px实心；
}
#主要{
文本对齐：居中；
}
身体{
保证金：0自动；
}
.bkg{
位置：固定；
z指数：10；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：url(http://svgur.com/i/42T.svg);
背景附件：固定；
背景尺寸：封面；
}

按钮
按钮
按钮
按钮
JavaScript解决方案
解决方案的精神：

在CH62、FF57和IE11上测试

kastriotcunaku的答案很好如果你不介意格式的话，
此解决方案保持与给定参数相同的参数，
在这里，我将尝试为
#导航
提供一个外观和定位为身体的背景，以使用JavaScript提供透明的错觉，使其具有响应性

背景尺寸：
#navigation
div上的封面将使其看起来更密集。因此，我将尝试通过拉伸背景t来模拟
cover
navigationElement.style.backgroundSize=(document.body.clientHeight/imgH)*imgW+"px";