遮盖元素的区域以查看下方区域并与之交互

Question

是否可以动态切出 HTML div 的区域并查看其下方的 HTML 并与之交互？

例如，假设我有一个 div 的混合 HTML 内容，大小为 500x500，位于其他 HTML 内容之上。现在我想在顶部内容上打一个圆孔，这样我就可以看到下面的内容并与之交互。可能吗？

我想他们称之为掩蔽或淘汰。

Answer 1

如果您需要与下面的部分（通过剪切区域）进行交互，那么在我看来使用 clip-path 将是正确的选择。蒙版显示下面的部分，但它们通过将顶部元素的剪切区域设为透明来实现。因此，当存在任何类型的交互时（即使在裁切区域中），它基本上只发生在顶部元素上。当使用 clip-path 时，被剪切的区域是完全空白的，顶部元素什么也没有。因此，当该部分悬停时，交互直接发生在底部元素上。

Clip-path Demo:（当裁剪区域悬停时，底部元素的背景发生变化）

.example {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
}
.example div {
  position: absolute;
  height: 100%;
  width: 100%;
}
.bottom-layer {
  background: beige;
}
.bottom-layer:hover {
  background: chocolate;
}
.top-layer {
  background: tomato;
}
.top-layer:hover {
  background: hotpink;
}
#example1 .top-layer {
  clip-path: url(#circle);
}
#example2 .top-layer {
  clip-path: url(#pentagon);
}

<div class='example' id='example1'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>
<div class='example' id='example2'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>

<!-- the clip-path definition -->

<svg height="0" width="0">
  <defs>
    <clipPath id='pentagon' clipPathUnits='objectBoundingBox'>
      <path d='M0.25,0.25 0.75,0.25 0.75,0.5 0.5,0.75 0.25,0.5 0.25,0 0,0 0,1 1,1 1,0 0.25,0z' />
    </clipPath>
    <clipPath id='circle' clipPathUnits='objectBoundingBox'>
      <path d='M0.25,0.5 A0.25,0.25 0 1,1 0.75,0.5 L1,0.5 1,0 0,0 0,0.5 0.25,0.5 
               M0.75,0.5 A0.25,0.25 0 1,1 0.25,0.5 L0,0.5 0,1 1,1 1,0.5 0.75,0.5' />
    </clipPath>
  </defs>
</svg>

蒙版示例：（悬停在裁剪区域对底部元素没有影响）

.example {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
}
.example div {
  position: absolute;
  height: 100%;
  width: 100%;
}
.bottom-layer {
  background: beige;
}
.bottom-layer:hover {
  background: chocolate;
}
.top-layer {
  background: tomato;
}
.top-layer:hover {
  background: hotpink;
}
#example1 .top-layer {
  -webkit-mask-image: radial-gradient(circle farthest-side at 50% 50%, transparent 50%, white 50%);
}
#example2 .top-layer {
  -webkit-mask-image: linear-gradient(to top left, white 50%, transparent 50%);
}

<div class='example' id='example1'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>
<div class='example' id='example2'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>

遮盖元素的区域以查看下方区域并与之交互

Mask an area of an element to see and interact with area beneath

html

css

css-shapes