Question

如何在HTML元素E上制作玻璃窗格（例如带沙漏），仅在E的边界内？
玻璃窗我们的意思是说，一个半透明的沙漏，只与E元素边界的区域重叠。当玻璃窗激活时，背景中的任何东西都无法进入我们尝试使用 uibModal 库，但它遍布整个窗口，而我们只需要重叠特定元素。

谢谢，

拉米

Answer 1

这里的技巧是使用强大的z-index属性和一些不透明度。

假设你有一个300px宽度和100vh高度的横向元素：

<aside style="width:300px; height:100vh; float:right; z-index:1;"> </aside>

现在，您所要做的就是在其中插入一个div，其中position：absolute（不干扰div的其他对象）和更高的z-index值：< / p>

<aside class="parent">
  <div class="pane"></div>
</aside>

CSS：

.parent{
    width:300px; /*or your width/height settings...*/
    height:100vh; 
    float:right; /*just for the example, you can set your div wherever you want*/
    z-index:1; 
}
.pane{
    height:100vh; /*needed to fill your parent div*/
    width: 300px; 
    z-index:2; 
    position:absolute; 
    opacity: 0.6; /*pane effect*/
 }

通过这种方式，您的div上的“水印”不会被点击，并且具有窗格效果。

特定元素上的Angular / HTML Glass窗格

1 个答案: