固定透明区域后面的遮罩元素

Question

我有一个div container1，其中包含其他div或svgs之类的不同元素。

这些元素可以container1上下滚动

但是现在container1的某个区域不应显示这些元素，而container1本身仍然通常可见。我必须用一种看不见的元素掩盖它们！

在下面的说明图中，您可以看到：

1. container1：红色区域
2. container1中的元素：黑色
3. 可见container1但元素不可见的区域：橙色矩形

但是重要的是，仍然可以看到不位于该区域后面的部分元素（例如svg）！

Example

有遮盖特定区域的方法吗？

Answer 1

如果“橙色矩形”后面的元素被隐藏，那是因为“橙色矩形”具有背景。 HTML元素（例如span，div，p等）不能在它们后面隐藏元素，除非这些元素具有背景。 如果橙色矩形有背景，则其后面的元素将被隐藏，但是您可以使用z-index属性将矩形后面的元素置于前面。